《锋利的jQuery》心得笔记--Two Sections

Posted 2020-07-01 逆光飞翔23

第三章

1、    DOM操作（节点）

1)         查找节点可以查找元素节点和属性节点

2)         创建节点：

(1)       创建元素节点

var addLi = $(“<li></li>”);或者var addLi = $(“</li>”)不可以是var addLi = $(“<li>”);

$(“ul”).append(addLi);

(2)       创建文本节点：var addLi = $(“<li>文本节点</li>”);

(3)       创建属性节点：var addLi = $(“<li class=””>属性节点</li>”);

3)         插入节点：

var add = $(“<b>插入节点</b>”);

(1)       $(“p”).append(add)和add.appendTo(“p”);添加到内部

(2)       $(“p”).prepend(add)和add. prependTo(“p”); 添加到内部

(3)       $(“p”).after(add)和add.insertAfter (“p”);添加到外部

(4)       $(“p”).before(add)和add. insertBefore (“p”); 添加到外部

4)         删除节点

(1)       remove()//可以带属性

(2)       detach()//与remove()不同的是：所绑定的事件和附加的数据等都会保留下来

(3)       empty()//清空节点

5)         复制节点

(1)       clone()

(2)       clone(true)是让复制元素的同时也复制元素所绑定的事件，同时也具备复制的功能

6)         替换节点

(1)       replaceWith();比如：$(“p”). replaceWith (add)

(2)       replaceAll;比如：add. replaceAll (“p”)

7)         包裹节点

(1)       wrap();比如：$(“p”). wrap (“<b></b>”)把p标签用b标签包裹起来

(2)       wrapAll()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的每个p标签用b标签包裹起来

(3)       wrapInner()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的所有p标签用b标签包裹起来

2、    DOM操作（属性）

1)         属性

(1)       获取属性：$(“p”).attr(“title”)

(2)       设置属性：$(“p”).attr({“title”:”myTitle”,”class”:”pItem”})

(3)       既能获取属性也能设置属性的还有：html()、text()、height()、width()、val()、css()

(4)       删除属性：$(“p”).removeAttr(“title”)

2)         样式

(1)       获取样式：$(“p”).attr(“class”)

(2)       设置样式：$(“p”).attr(“class”,”main”)

(3)       追加样式：$(“p”).addClass(“other”)

(4)       移除样式：

(1st) 删除一个：$(“p”). removeClass(“other”)

(2nd)    删除多个：$(“p”). removeClass(“other”) . removeClass(“main”)或者

           $(“p”). removeClass(“other  main”)

(5)       切换样式

(1st) toggle(function(){},function(){})

(2nd)    $(“p”). toggleClass(“other”)//如果类名存在则删除，不存在则添加

(6)       $(“p”). hasClass(“other”)判断是否含有某个样式

3)         html():

(1)       获取html()

$(“p”). html() 获取p里面的html内容

(2)       设置html()

$(“p”). html(“<b>设置html()</b>”)设置p里面的html内容

4)         text()

(1)       获取text ()

$(“p”). text () 获取p里面的文本内容

(2)       设置text ()

$(“p”). text (“设置html()”)设置p里面的文本内容

5)         val()【相当于js的value属性】

(1)       能获取属性也能设置属性

(2)       能使select()、checkbox()、radio()相应的选项被选中

3、    DOM操作(遍历节点)

1)         childer() 子元素集合

2)         next() 匹配元素后面紧邻的同辈元素

3)         prev() 匹配元素前面紧邻的同辈元素

4)         silbings() 匹配元素前后紧邻的同辈元素

5)         closest(“xx”) 取得最近的匹配元素

6)         parent()、parents()

4、    DOM操作(CSS)

1)         单个样式：$("p”).css(“color”,”red”);

2)         多个样式：$("p”).css({“color”:”red”,” opacity”:”0.5”});

3)         offset()；获取元素在当前视窗的相对位移

4)         position()；

5)         scrollTop()、scrollLeft()

第四章

1、    事件绑定：bind(“click”, fn);有三个参数，但是第二个参数一般作为event.data属性传递给对象的额外数据对象，一般没用它。

2、    合成事件：hover()【替代的是mouseenter、mouseout】、toggle()

3、    事件冒泡

1)         事件对象【单击p标签时，事件对象就会被创建，事件对象只有事件处理函数能访问到，事件处理完毕，事件对象就会被销毁】：$("p”).bind(“click”,function(event){})

2)         防止事件冒泡：加上event.stopPropagation()

3)         阻止默认行为：event.preventDefault();【比如有时候提交按钮时，检查到表单不合法，阻止表单提交】

4)         阻止事件冒泡和默认行为可以直接简写成：return  false;

5)         jQuery不支持事件捕获

4、    事件对象的属性：

1)         event.type 获取事件类型

2)         event. preventDefault()

3)         event. stopPropagation()

4)         event.target

5)         event.relatedTarget

6)         event.pageX和event.pageY

7)         event.which鼠标单击时，获取鼠标的左（1）、中（2）、右（3）键

8)         event.metaKey

5、    移除事件

1)         unbind(【事件类型】，【要移除的函数】)

(1)       $("p”).unbind(“click”);

(2)       $("p”).unbind(“click”,function(){});

(3)       如果前面的$("p”).bind(“click”,mgFn=function(){});

这样的话：$("p”).unbind(“click”, mgFn);

2)         one(【事件类型】，【数据，可不传】,【函数】)//处理函数只执行一次

6、    模拟操作

1)         当用户一进入页面后就触发事件：$("p”).trigger(“click”)或者$("p”). click()

2)         触发自定义事件：$("p”).trigger(“myclick”)

3)         传递数据：trigger (【事件类型】，【要传递的附加数据】)

eg: $("p”).trigger(“myclick”,function(event,msg1,msg2){})

4)         执行默认操作

(1)       trigger()触发事件后，会执行浏览器默认操作$("input”).trigger(“focus”)

(2)       不执行浏览器默认操作$("input”).triggerHandler(“focus”)

7、    其他方法：

1)         绑定多个事件bind(“mouseover mouseout ”, fn);

2)         添加事件命名空间(可以多个事件用同一个命名空间)

bind(“mouseover.plugin ”, fn);

3)         元素绑定相同事件，以不同命名空间进行调用

bind(“mouseover ”, fn);

bind(“mouseover.plugin ”, fn);

 

8、    动画

1)         show()和hide()-----------------------toggle()

2)         fadeIn()和fadeOut()-----------------fadeToggle()

3)         slideUp()和slideDown()-----------------slideToggle()

4)         animate(【样式属性与值】，【速度参数可选】，【动画完成时的函数，可选】)

(1)       $("p”). animate({left:”+=50px”,opacity:”0.5”},3000)

(2)   

   $("p”). animate({left:”+=50px”,opacity:”0.5”},3000,function(){

$(this).css(“border”:”1px solid blue”);//最后一步执行

})

 

5)         停止动画：stop(【是否清空为执行完的动画队列，（true/false）,可选】，【是否直接将正在执行的动画跳转到末状态，（true/false）,可选】)

PS：如果直接使用stop()就会立即停止正在执行的动画

6)         判断是否处于动画状态：is(“:    ”)

eg:$("p”).is(“:animate”)

7)         延迟动画：delay(1000)

8)         其他动画方法：

(1)       toggle(speed，[callback])

(2)       fadeToggle(speed，[easing] ,[callback])

(3)       fadeTo(speed,opacity ,[callback])

(4)       slideToggle(speed，[easing] ,[callback])

第五章

1、    IE6不支持除超链接元素之外的:hover伪类选择符，可以使用css中设置样式，然后再脚本中使用addClass

2、    复选框

1)         反选操作：

$(‘[name=item]:checkbox’).each(function(){

         this.checked = !this.checked;

})

 

2)         全选/全不选用同一个复选框：

$(‘[name=item]:checkbox’).attr(“checked”,this.checked);

 

3、    表格的索引$(“tr:【odd/even】”)从0开始，所以第1行是偶数,

不过当$(“tbody>tr:【odd/even】”)时1是奇数

4、    end()可以让一个事件从回$(this)对象

5、    表格：

1)         带有复选框：

 

 $("tbody>tr").click(function(){

       //判断当前是否选中

       var hasSelected = $(this).hasClass("selected");

       //如果选中，则移出selected类，反之

       $(this)[hasSelected?"removeClass":"addClass"]("selected");

       //查找内部的checkbox，设置对应的属性

       $(this).find(":checkbox").attr("checked",!hasSelected);

    })

 

2)         表格的展开和关闭

通过控制tr的class和id

(1)       比如父行的class=”parent”和id=”row_01/02……”

子行的class=”child_ row_01/02……”

(2)       jQuery代码为：

     

  $(“tr.parent”).click(function(){

$(this).toggleClass(“selected”).sibling(“.child_”+this.id).toggle();

})

 

(3)       当有父行是默认展开的话，当用户进入页面时，默认需要收起来，只要在上面那个代码后面再加上.click()

3)         表格内容筛选：搜索框里面输入变量值

$(“#filterName”).keyup(function(){

    $(“table tbody tr”).hide().filter(“:contains(‘”+(  $(this).val()  )+”’)”).show();

}). keyup ();//DOM加载完了之后，绑定事件完成时候触发