jQuery基础学习（三）

最新推荐文章于 2024-08-09 02:16:38 发布
墨笙弘一
最新推荐文章于 2024-08-09 02:16:38 发布
阅读量424
点赞数
分类专栏：前端文章标签： jquery
本文链接：https://blog.csdn.net/u012934325/article/details/78036319
版权
前端专栏收录该内容
61 篇文章 1 订阅
订阅专栏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>JQuery中的DOM操作</title>
    <meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript">
    //获取元素节点li的文本内容
    var $li = $('ul li:eq(1)');
    var li_text = $li.text();
    //查找属性节点
    var $para = $('p');
    var p_txt = $para.attr('title');
    //创建元素节点
    var $li = $('<li></li>');
    $('ul').append($li);
    //创建文本节点
    var $li_1 = $("<li>香蕉</li>");//创建一个<li>元素，包括元素节点和文本节点.
    $("ul").append($li_1);//添加到ul节点中，使其在网页中显现
    //创建属性节点
    var $li_1 = $("<li title='香蕉'>香蕉</li>")//创建一个<li>元素,其中包含元素节点，属性节点，文本节点
    $("ul").append($li_1);
    //设置属性值
    $("p").attr("title","my hobby");//设置单个的属性值
    $("")
</script>
</body>
</html>
<!--
DOM是Document Object Model的缩写，文档对象模型，是一种与浏览器，平台，语言无关的接口，使用该接口可以轻松的访问页面中所有的标准组件。
DOM分DOM Core,HTML-DOM,CSS-DOM
JQuery中的DOM操作
（1-创建元素节点   2-创建文本节点  3-创建属性节点）
（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中
（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式
3.插入节点
（1）append():向每个匹配的元素内容追加内容
（2）appendTo():将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B),表示将A追加到B中
移动元素时，首先从文档上删除此元素，然后将该元素插入文档中的指定节点。
（3）prepend():向每个匹配的元素内部前置内容。
（4）prependTo():将所有匹配的元素前置到指定的元素中，$(A).prependTo(B)将A前置到B中
（5）after():在每个匹配的元素之后插入内容
（6）insertAfter():将所有匹配的元素插入到指定元素的后面，$(A).after(B)：表示将A插入到B后面
（7）before():在每个匹配的元素之前插入内容
（8）insertBefore():将所有匹配的元素插入到指定的元素的前面，$(A).before(B).表示将A插入到B前面
4.删除节点
如果文档中某一个元素多余，那么应将其删除。remove(),detach()和empty()
（1）remove():作用是从DOM中删除所有匹配的元素。传入的参数用于根绝JQuery表达式来筛选元素。使用该方法后，该节点及所包含的所有后代
节点将同时被删除。方法的返回值是一个指向已被删除的节点的引用。
该方法还可以通过传递参数来选择性的删除元素。
（2）detach()：类似于remove方法，但是这个方法不会吧匹配的元素从JQuery对象中删除掉，因而可以在将来再使用这些匹配的元素。与remove
不同的是，所有绑定的事件，附加的数据等都会保留下来。
（3）empty():清空节点，清空元素中的所有后代节点。
5.复制节点
使用clone()方法可以对节点进行复制，复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，需要使用clone(true)
在clone()方法中传递一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也具有相同的复制功能。
6.替换节点
（1）replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素
（2）replaceAll():与replaceWith()方法使用类似，只是颠倒了replaceWith()的操作。
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
7.包裹节点
如果要将某个节点用其他标记包裹起来，可以使用
（1）wrap()方法。该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档
的语义。
（2）wrapAll():该方法会将所有匹配的元素用一个元素来包裹,wrap()方法是将所有的元素进行单独的包裹。如果被包裹的多个元素之间有其他的元素
，其他的元素会被放到包裹元素之后。
（3）wrapInner():该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
8.属性操作
（1）attr()方法可以用来获取和设置元素属性
（2）removeAttr()方法来删除元素属性
9.追加样式
addClass():会使得样式进行叠加
在CSS中，有以下两条规定：
（1）如果给一个元素添加了多个class值，那么就相当于合并了它们的样式
（2）如果有不同的class设定了同一样式属性，则后者覆盖前者。
10.移除式样
removeClass():不带参数时，就会将class的值全部删除。也可以带多个参数
11.切换样式
（1）$toggleBtn.toggle(function(){//toggle(),交替一组动作
//显示元素
},function(){
//隐藏元素
})
（2）toggleClass()方法控制样式上的重复切换。如果类名存在则删除它；如果类名不存在则添加它。
12.判断是否含有某个样式
（1）hasClass()可以用来判断元素中是否含有某个class,如果有，则返回true,否则返回false
13.设置获取HTML，文本和值
（1）html()方法
类似于js中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
可以用于XHTML文档，但是不能用于XML文档。
（2）text()方法
类似于js中的innerText属性，可以用来读取或者设置某个元素中的文本内容。
js中的innerText属性不能在火狐浏览器中运行，而jquery的text()方法支持所有的浏览器
text()方法对HTML和XML文档都有效。
（3）val()方法
类似于js中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉框还是单选框，它都可以返回元素的值。如果元素是多选，则返回
一个包含所有选择的值的数组。
（4）focus():处理获得焦点时的事件
（5）blur():处理失去焦点时的事件。
14.遍历节点
（1）children():获取匹配元素的子元素集合
children()方法只考虑子元素而不考虑其他后代元素。
（2）next():用于取得匹配元素后面紧邻的同辈元素。
（3）prev():获取匹配元素前面紧邻的同辈元素
（4）siblings()：用于取得匹配元素前后所有的同辈元素。
（5）closest():取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到
找到匹配选择器的元素。如果什么有额没有找到，则返回一个空的jquery对象
15.parent(),parents(),closest()的区别
（1）parent():获得集合中每个匹配元素的父级元素。该方法从指定类型的直接父节点开始查找，返回一个元素节点
（2）parents():获得集合中每个匹配元素的祖先元素。该方法找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点。
（3）closest():从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
16.CSS-DOM操作
（1）利用css()方法获取元素的样式属性。
（2）直接利用css()方法设置某个元素的单个样式
（3）利用css()方法可以同时设置多个样式属性
（4）如果值是数字，将会自动被转换为像素值
（5）在css()方法中，如果属性中带有“-”符号，如果在设置这些属性的值的时候不带引号，那么就要用驼峰写法，如果带上引号，可以写成
"font-size"，也可以fontSize。
（6）对于透明度的设置，可以直接使用opacity属性。
（7）获取某个元素的height属性，$("p").css("height");
（8）获取另外一个元素的高度方法height(),作用是取得匹配元素当前计算的高度值px.height()方法也能用来设置元素的高度，如果传递的值是
一个数字，则默认单位是px,如果要用其他的单位，必须传递一个字符串。
（9）height()方法可以用来获取window和document的高度
（10）css方法获取的高度值与样式的设置有关，可能会得到"auto",也可能得到10px之类的字符串。height()方法获取的高度值则是元素在页面
中的实际高度，与样式的设置无关，并且不带单位。
（12）width():可以获取匹配元素的宽度值（px），也能用来设置元素的高度。
（13）offset():获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，top和left,只对可见元素有效。（left左偏移 top右偏移）
（14）position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，也包括left和top
（15）scrollTop():获取元素的滚动条距离顶端的距离。
（16）scrollLeft():获取元素的滚动条距离左侧的距离。
（15）（16）两个方法都可以指定一个参数，用来控制元素的滚动条滚动到指定位置。

-->
在这里插入图片描述