赞
踩
目录
jQuery继承并发扬了JavaScript对DOM对象的操作特性,使开发者可以方便地操作DOM对象。
- //在控制台查看id为aaa的节点
- $(function(){
- console.log($("#aaa"));
- })
- $(html)
- //创建一个li节点
- var nodes= $("<li>第六个</li>");
jQuery的节点插入方式
插入方式 | 语法 | 描述 |
内部插入 | append(content) | 在匹配元素结尾插入指定内容 |
内部插入 | appendTo(content) | 把选择的元素追加到另一个指定的元素集合内部 |
内部插入 | prepend(content) | 在匹配元素开始的位置插入指定内容 |
内部插入 | prependTo(content) | 将所有匹配元素前置到指定的元素集合内部 |
外部插入 | after(content) | 在匹配元素之后插入内容 |
外部插入 | insertAfter(content) | 将匹配的元素插入另一个指定的元素集合的后面 |
外部插入 | before(content) | 在匹配元素之前插入内容 |
外部插入 | inseBefore(content) | 将匹配的元素插入另一个指定的元素集合的前面 |
注意:内部插入为匹配元素的子类,外部插入为匹配元素的兄弟节点
- $(function(){
- //创建节点
- val li1=$("<li>大头儿子</li>");
- val li2=$("<li>小魔仙</li>");
- //插入节点
- $("ul").append(li1);
- $("ul").prepend(li2);
- })
1)remove()方法
其中,selector为可选参数,表示被匹配元素的选择器表达式。如果接收参数,则根据传入的jQuery选择器表达式筛选出要删除的元素,并执行删除操作。
remove([selector])
2)detach()方法
detach()方法和remove()方法一样,都是从DOM文档中移除指定的元素。二者的区别在于 detach()方法在于删除元素时会保留与删除的元素关联的数据丶事件等。当需要将删除的元素重新插入DOM时,detach()方法更为适用。
detach([selector])
3)empty()方法
empty()方法不接收任何参数,严格意义上而言, empty()方法并不是删除元素,而是清空元素及其后代元素。
- //清空id为aaa的内容及其子元素
- $("#aaa").empty()
小结:
jQuery提供的三种删除方法的适用场景
其中,参数includeEvents为可选参数,它是布尔类型,默认值为false,表示是否复制匹配元素的所有事件处理。
clone([includeEvents])
jQuery中提供了两个替换节点的方法,分别是replaceWith()和replaceAll()方法。
replaceWith()方法用于将所有匹配的元素替换成指定的HTML内容或元素,replaceWith()和replaceAll()方法作用相同,二者的区别在于语法上内容和选择器的位置。
- //selector:替换的元素 content:被替换的元素
- $(selector).replaceWith(content)
- $(content).replaceAll(selector)
在jQuery中使用children()方法返回指定元素的所有直接子元素。
其中,expr为可选参数,表示传入的jQuery选择器表达式。通过它可以缩小搜索范围。
- children([expr])
-
- $(function(){
- //遍历ul元素的所有子元素
- var lis=$("ul").children();
- console.log(lis);
- console.log(lis.length);
- })
jQuery提供了三种遍历同辈元素的方法,分别是next()丶prev()丶和siblings()方法。
- next([expr]) //用于获取紧邻匹配元素的下一个元素
- prev([expr]) //用于获取紧邻匹配元素的前一个元素
- siblings([expr]) //用于获取匹配元素前面和后面的所有同辈元素
jQuery提供了两种种遍历前辈元素的方法,分别是parent()和parents()方法。
二者的区别在于,parent()方法获取当前匹配元素集合中每个匹配元素的父级元素,而parents()方法获取当前匹配元素集合中每个匹配元素的祖先元素。
- parent([selector]) //获取父级元素
- parents([selector]) //获取祖先元素(父级的父级元素)
除以上介绍的节点遍历方法为,jQuery还有许多其他遍历方法,如each()丶end()丶find()丶filter()丶eq()丶first()丶last()等。主要介绍each()方法,其他遍历方法使用较为简单,可以在jQuery官网的API中找到相关的使用说明文档,这里不再详细讲解。
$(selector).each(function(index,element){})
each()方法为每个匹配的元素提供了运行函数,其中,参数index表示选择器的位置;element表示当前元素;当function函数返回值为false时,可以停止循环。
使用jQuery中的attr()方法获取与设置元素属性。
其中,attribute表示属性名,value表示属性值。如果只传入attribute,则表示获取属性值;传入attribute与value则表示设置属性值。设置属性值时可以传入多个属性和值。
- $(selector).attr(attribute) //获取属性值
-
- $(selector).attr(attribute,value) //设置单个属性值
- $(selector).attr({attribute:value,attribute:value,attribute:value...}) //设置多个属性值
在jQuery中使用removeAttr()方法删除元素的属性。
$(selector).removeAttr(attribute)
小结: 与js操作DOM不一致的地方是:增删改都不需要用父节点来执行对应的操作。
其中,content为可选参数,当传入参数时,表示设置指定元素的新内容为传入内容(可以包含HTML标签),而未传入参数时,则返回指定元素的当前内容。
$(selector).html([content])
text()方法用于获取或设置匹配元素的文本内容
$(selector).text([content])
jQuery还提供了获取元素value属性值的val()方法。val()方法类似于JavaScript的value属性。通常情况下,结合表单标签进行使用,如文本框丶下拉列表和单选框等。
$(selector).var([value])
在jQuery中,使用css()方法设置或获取样式值
- $(selector).css(name,value); //设置单个css属性
- $(selector).css({name:value,name:value,name:value...}); //设置多个css属性
- $(selector).css(name); //获取单个css属性
- //键值对的方式,要加引号
在jQuery中,对元素class类样式的操作有追加样式和移除样式。
addClass()方法为追加样式,removeClass()方法为移除样式,其中参数classname为class类样式名称。如需设置多个class类样式,使用空格进行分隔。
- $(selector).addClass(classname); //设置单个class类样式
- //设置多个class类样式
- $(selector).addClass(classname1 classname2 classname3);
-
- $(selector).removeClass(classname); //移除单个class类样式
- //移除多个class类样式
- $(selector).removeClass(classname1 classname2 classname3);
在使用jQuery实现网页交互过程中,可以使用toggleClass()和hasClass()方法对样式进行切换或判断当前元素是否存在指定样式。
其中,classname为class类样式名称,使用toggleClass()方法对指定元素的class类样式进行添加和移除切换。使用hasClass()方法可以判断指定元素是否指定了class类样式。如果指定了class类样式,则返回true;否则返回false。
- $(selector).toggleClass(classname); //切换class类样式
- $(selector).hasClass(classname); //判断class类样式是否存在
方法 | 描述 | 示例 |
css(name[,value]) | 设置或获取指定元素的样式值 | $("div").css("color","red") |
height([value]) | 设置或获取指定元素的高度 | $("div").height(200) |
width([value]) | 设置或获取指定元素的宽度 | $("div").width(300) |
offset([value]) | 设置或获取指定元素相对于文档的偏移 | $("div").offset() |
position() | 获取第一个匹配元素相对于父元素的位置 | $("div").position() |
scrollLeft([position]) | 设置或获取指定元素相当于滚动条左侧的偏移 | $("div").scrollLeft(40) |
scrollTop([position]) | 设置或获取指定元素相当于滚动条顶部的偏移 | $("div").scrollTop(50) |
练习小作业
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。