jQuery基础学习（三）

来源：互联网发布：淘宝网安徽食品药品编辑：程序博客网时间：2024/06/07 00:11
<!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-DOMJQuery中的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,否则返回false13.设置获取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）两个方法都可以指定一个参数，用来控制元素的滚动条滚动到指定位置。-->
阅读全文
0 0