day050 前端Jquery库的使用

一、导入jquery文件

<script src=" jquery库文件"></script>

二、选择标签

>>概念明晰：

$是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值