jQuery

·  阅读 30

image.png

一. jquery获取元素

1. 获取元素的属性,使用attr方法,语法:.attr('属性名')

2. 设置属性值,则使用attr('属性名','属性值')\

3. 获取元素的value值,多用于form控件,普通元素中没有。.val()\

4. 获取元素的文本内容,即标签内部的文本内容,它会过滤掉标签中的子标签。语法:.text()\

5. 获取元素的内部html信息,这个跟text()很像,但不过滤里面的html标签。语法:.html()\

二. jQuery的链式操作

jQuery链式操作就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。例:

$('div').find('h3').eq(2).html('Hello');
复制代码

解开为:

$('div') //找到div元素

   .find('h3') //选择其中的h3元素

   .eq(2) //选择第3个h3元素

   .html('Hello'); //将它的内容改为Hello
复制代码

jQuery还提供了.end()方法,使得结果集可以后退一步:


   .find('h3')

   .eq(2)

   .html('Hello')

   **.end() //退回到选中所有的h3元素的那一步**

   .eq(0) //选中第一个h3元素

   .html('World'); //将它的内容改为World
复制代码

三. jQuery创建元素

创建元素节点:

$("<div></div>")

创建为本节点:

$("<div>文本节点</div>")

创建为属性节点:

$("<div id='test' class='fang'>文本节点</div>")

四. jQuery移动元素

提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

1.使用.insertAfter(),把div元素移动p元素后面:

$('div').insertAfter($('p'));
复制代码

1.使用.after(),把p元素加到div元素前面:

$('p').after($'div'));
复制代码

二者差别在于第一种方法返回div元素,第二种方法返回p元素

五. jQuery修改元素属性

  • 复制元素使用.clone()

  • 删除元素使用.remove().detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。

  • 清空元素内容(但是不删除该元素)使用.empty()

  • 创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

$('<p>Hello</p>');

  $('<li class="new">new list item</li>');

  $('ul').append('<li>list item</li>');
复制代码
分类:
前端
标签:
分类:
前端
标签: