jQuery笔记（二）常用操作

7、复习DOM操作

获取节点：document.getElementById();/document.getElementsByTagName();/querySelect()/........

创建节点：createElement()/createTextNode/createAttribute

替换节点：replaceChild

删除节点：removeChild

插入节点：appendChild/insertBefore

 

    

8、jQuery中的DOM操作

       基本操作

①html() - 类似于原生DOM的innerHTML属性

       获取 - html()

   设置 - html(html代码)

②val() - 类似于原生DOM的value属性

       获取 - val()

   设置 - val(value)

③text() - 类似于原生DOM的textContent属性

       获取 - text()

   设置 - text(文本内容)

④attr() - 获取或设置指定元素的属性

       获取 - attr(attrName) - 类似于getAttribute()

   设置 - attr(attrName,attrValue) - 类似于setAttribute()

⑤removeAttr(attrName) - 类似于removeAttribute()

       

 

9、class操作

  ①attr("class",classValue) - 设置

②addClass() - 追加样式

  ③removeClass() - 删除样式

    不传参 - 删除所有样式

传参 - 删除指定样式

  ④toggleClass() - 切换样式

      只接受一个参数，是在没有样式与指定样式之间切换，没有就新建，有就删除

  ⑤ hasClass() - 判断样式

      判断指定元素是否包含指定样式

 

10、设置css样式属性 - css()

①设置：.css(name,value)

     如果同时设置多个，用对象文字值：’color’：’red’，’first-size’：’12px’,........

 属性间用，隔开                

②获取：.css(name)

 

11、遍历节点

         parent() - 获取指定节点的父节点

         children() - 获取指定节点的所有子节点

         next() - 获取指定节点的下一个兄弟节点

         prev() - 获取指定节点的上一个兄弟节点

         siblings() - 获取指定节点的所有兄弟节点

         find(expr) - 在指定节点中查找指定内容

           注意 - 查找指定节点的后代节点

      $("#nj").prev().attr("name")获取节点的上一个兄弟节点

$("#nj").siblings().length  获取节点的所有兄弟节点的个数

      $("#city").find("li").length  获取id为city节点下所有li元素的个数(后代节点)

12、节点

①创建节点      

Jquery创建元素节点、属性节点、文本节点都使用$(html)

 创建元素节点：$("<li></li>");

 创建属性节点：$("<li id='test'></li>");

 创建文本节点：$("hello world !");

 同时创建：$("<li id='test'>hello world !</li>");

    ②删除节点

         remove() - 删除自身及后代节点

         empty() - (清空)删除后代节点,但保留自身节点

    ③插入节点

         内部插入（当做子节点插入）：

    append(content|fn)   向每个匹配的元素内部末尾追加内容。

    appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合末尾。

    prepend(content|fn)  向每个匹配的元素内部头部内容。

    prependTo(content)   把所有匹配的元素追加到另一个指定的元素元素集合头部

外部插入（当做兄弟节点插入）：

    after(content|fn)    向每个匹配元素的后面添加内容

    before(content|fn)   向每个匹配元素的前面添加内容

    insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后

    面。

    insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的

    前面。

      

 

④替换节点

      A.replaceWith(B) 方法把被选元素替换为新的内容。B替A

A.replaceAll(B) 方法相反       A替B

$("button").replaceWith($("<p>这也是段落.</p>"));

$("<button>按钮</button>").replaceAll($("p"));

       

    

⑤复制节点

         jQuery - clone(boolean)

           boolean参数 - 表示是否复制事件

         DOM - cloneNode(boolean)

           boolean参数 - 表示是否复制后代节点

     例：$("button").clone(true).appendTo($("p"));//复制button按钮,将其追加到p标签中

 

13、事件

     ready() - 类似于window.onload的作用

       写法

         $(document).ready(function(){});

         $().ready(function(){});

         $(function(){}); //常用

 

14、ready与onload的区别

   ready：具有简写方式

   在一个HTML页面中允许多个

   等待HTML页面中所有DOM结构加载完毕后就可以执行

   onload：没有简写方式

   在一个HTML页面中只能一个

   必须等待HTML页面中所有内容全部加载完毕后才能执行

 

15、事件绑定与解绑

    ①绑定事件  bind(type,data,fn)

         type - 指定绑定的事件名称

           如果绑定多个事件时,使用空格隔开

         data - 可选项,作为event.data属性值传递给事件对象的额外数据对象

         fn - 绑定事件的处理函数

    ②解绑事件unbind(type)         

type - 指定解绑的事件名称

           默认不传递任何内容 - 即解绑所有事件

       指定单个事件名称 - 解绑单个事件

       指定多个事件名称 - 解绑多个事件

       

16、鼠标悬停事件

mouseover()事件是bind('mouseover')的简写方式

$(".d1>h3").bind("mouseover mouseout",function(){

if($(".d2").is(":hidden")){

$(".d2").show(1000);

}else{

$(".d2").hide(1000);

}

 });   

 

$(".d1>h3").mouseover(function(){

$(".d2").show(1000);

   }).mouseout(function(){

$(".d2").hide(1000);

 });

 

 

17、click()事件是bind('click')的简写方式

18、事件对象(event)

       事件对象被封装在事件对应的处理函数的参数

       ele.onclick = function(event){

       event

          }

       常用用法

         pageX/clientX/offsetX/x - 当前x轴

         pageY/clientY/offsetY/y - 当前y轴

         target - 当前绑定事件的源对象(元素)

         returnValue - 返回值,Boolean类型

         return false - 阻止页面的默认行为

         which/keyCode/charCode - 键盘对应值

    

 

 

19、事件冒泡

       捕获

       冒泡

     

JQuery中阻止事件冒泡方式及其区别

方式一：event.stopPropagation();

 $("#div1").mousedown(function(event){   

 event.stopPropagation();

 });

方式二：return false;

 $("#div1").mousedown(function(event){

return false;3

});

 

 

 

事件切换

       hover(over,out)方法

         over - onmouseover事件的处理函数

         out - onmouseout事件的处理函数

   

20、JQuery中的常用事件

.click()	鼠标单击触发事件，参数可选（data，function）
.dblclick()	双击触发，同上
.mousedown()/up()	鼠标按下/弹起触发事件
.mousemove()	鼠标移动事件
.mouseover()/out()	鼠标移入/移出触发事件
.mouseenter()/leave()	鼠标进入/离开触发事件*
.hover(func1,func2)	鼠标移入调用func1函数，移出调用func2函数
.focusin()	鼠标聚焦到该元素时触发事件
.focusout()	鼠标失去焦点时触发事件
. focus()/.blur()	鼠标聚焦/失去焦点触发事件（不支持冒泡）
.change()	表单元素发生改变时触发事件
.select()	文本元素被选中时触发事件
.submit()	表单提交动作触发*
.keydown()/up()	键盘按键按下/弹起触发
.on()	多事件的绑定
.off()	移除事件的绑定
.trigger(“event”)	触发事件event调用
.triggerHandler()	触发事件，不会冒泡，不会触发默认事件