jquery_day1[选择器,节点选择,事件委派]

jQuery 的宗旨: write less do more   写更少的代码做更多的事情

 

轻量级的js库,兼容css和各种浏览器

 

jQuery:调用下面具体函数的一个对象

    写法,Jquery.方法  ==== $  //可以直接写成$符号

 

jquery的基础语法:$(selector).action()

 

jquery下载地址:https://code.jquery.com/jquery-3.2.1.js

 

选择器:(selector)查找想操作的标签

 

DOM对象有自己的属性跟方法,jquery也有自己的属性跟方法,属性方法不能混用

 

$("p1").css({"color":"red","fontsize":"35px"});    //修改多条css属性,使用大括号括起来,字典形式

 

//当需要修改多条相同的class 属性时,DOM下是找到所有的class然后for循环更改css样式

 

$(".c1").css("color","green")         //   <------jquery直接匹配所有的 class="c1"的标签 进行css属性修改

 

//匹配对应的所有标签

$("div").css("background-color","red")

 

//通配符匹配

$("*").css("color","green")

 

层级选择器: 跟css选择器基本一致

$("outer >p").css()    子代选择器

$("outer" p).css()    后代选择器

 

基本筛选器:

$(".box .item:eq(3)").css()       //选择.box下的 第四个.item 进行css样式修改

$(".box .item:lt(4)").css()     //lt 小于  .   选择 索引小于4的  顾头不顾尾

$(".box .item:gt(4)").css()    //gt大于

$(".box .item:even").css()   //偶数行

$(".box .item:odd").css()    //奇数行

$(".box .item:gt(1):lt(2)").css()   //先执行gt结果出来是lt的输入,lt在过滤一次就可以选择 某个范围.

 

$(".box .item").eq(4).css()    //还可以写成这种,推荐这种写法因为 eq的参数没有写死可以使用变量

 

属性选择器: 

$("[egon="sb"]").css()   //匹配属性

 

表单选择器:

$(":text").css()           //  <-----这种写法 只针对input表单(简写)

//$("[type=text]").css()   相当于这种

 

筛选器:

//类似导航属性   过滤

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

$("#d1").next().css().next().css()   //jquery支持链式操作   选择下一个兄弟的下一个兄弟

$("id").nextAll().css()    //找到下面所有的兄弟标签

$("id").nextUntil("#d4").css()   //直到id=d4但是不包括d4

 

.prev()       //向上  使用同 next

.prevAll()

.prevUntil

 

$("d4").siblings().css()          //查找所有的兄弟标签

 

查找后代子代:

$(".c1").children()       //所有的子代  ()内还可以筛选下

$(".c1").find()    //所有的后代,使用同子代一样

 

查找父:

$(".p1").parent()    //找到父标签  可以 继续加 .parent()  定位上上层父标签

console.log($(".p1").parent().attr("class"))   //打印父标签的 class值

$(".p1").parents()   //找到上层所有的父标签 一直到body标签

$(".p1").parentsUntil(".c1").css()   //在向上找的时候阻止下,找到c1之前的所有的父标签

 

jquery的事件绑定

 

//格式:

jquery对象.事件(function () {

    执行的代码

});

 

$("button").click(function () {

    //append添加

    $("#box").append("<div class='item'>444</div> ")

})

 

//同上面直接 .click一致  上面是简写

$(".item").bind("click",function() {

        执行的代码

})

 

事件:

.click   //点击事件

.bind  //绑定事件

.on   //事件委派

 

事件委派(把自己的事件让子元素也有)

//获取父元素  在父元素哪里 .on(事件,子元素,函数)

$("box").on("click",".item",function() {

    执行的代码

})

 

this:

$("#box").on("click","item",function() {

    alert((this).html())

})

 

事件解除:

$("box").click(function() {

    $("item").off("click")

})

 

.addClass ("c2")   //添加一个class

.removeClass("c2")  //移除一个class