day050 前端Jquery库的使用

一、导入jquery文件

二、选择标签

>>概念明晰：

$是jQuery类名的简写

$( )选择出来的都是一个集合（即使只有一个元素），这个集合就是jQuery对象，集合里存的是dom对象，点后边的操作针对集合中的每一个元素进行，会默认遍历；

jquery对象转成dom对象方式 $( )[ ]

dom对象转成jquery对象方式 $(dom)

>>直接查找

//基本选择器

$("*")    $("#id")     $(".class")    $("element")    $(".class,p,div")

//层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

//属性值选择器

$('[id="div1"]')

$('["alex="sb"][id]')   //有属性alex="sb"并且有id属性

//基本筛选器

$("li:first")        // jquery集合中第一个

$("li:eq(2)")     // jquery集合中索引等于2的

$("li:even")      // jquery集合中索引为偶数的

$("li:gt(1)")     // jquery集合中索引大于1的

//进阶筛选器

$("li").first()     //jquery集合中第一个

var index =2;

$("li").eq(index)     // jquery集合中索引等于2的

//表单选择器（特殊的）

$("[type='text']")   //选择type属性值等于text的标签

$(":text")          //效果同上， 这种形式只使用于input标签

//判断某个标签是否拥有某个class值,返回布尔值
$("#i2").hasclass("c2'')

>>导航查找

//查找兄弟

$("#i2").next()       //下一个兄弟标签

$("#i2").nextAll()      //下面所有兄弟标签

$("#i2").nextUntil(".c2")     // #i2和.c2标签之间所有的兄弟标签

$("#i2").prev()          //上一个兄弟标签

$("#i2").prevAll()

$("#i2").prevUntil(".c2")

$("#i2").siblings()     // 所有的兄弟标签，不包括自己

//查找子孙标签

$(".p1").children()        //查找所有的儿子标签

$(".p1").children(".c8")    //查找指定的儿子标签

$(".p1").find()          //查找所有的子孙标签

//查找父级标签

$(".c10").parent()     //查找父亲标签

$(".c10").parents()    //查找所有父级标签

$(".c10").parentsUntil("body")    //查找到body标签为止的父级标签

三、操作标签

>>绑定事件

方式一： $(" ").事件名(fun)

$("ul li").click(fun) //点击事件

方式二： $(" ").on("事件名", fun)

$("ul li").on("click", fun) //on方法绑定点击事件

****特别的****

事件委派：给父类绑定一个事件，但由儿子来执行

$("ul li").on("click", "li", fun) //给ul绑定点击事件，委派给li标签执行

>>文本操作

$(" ").html()

$(" ").text()

不带参是取值，带参是赋值。区别同js

>>属性操作

$(" ").attr("属性"，"值") //给标签设置属性

$(" ").attr("属性") //查找属性对应的值

$(" ").removeattr("属性") //移除属性

>>class属性操作

$(" ").addClass("值") //添加一个class值

$(" ").removeClass("值") //移除一个class值

秒客网

day050 前端Jquery库的使用

相关文章