jQuery对JavaScript中的DOM操作进行了封装 样式操作 内容及Value值操作 DOM操作分类: 节点操作 节点属性操作 节点遍历 CSS-DOMC操作 “元素”和“节点”含义大同小异,并不严格区分
1.样式操作 设置和获取样式值 css() $().css(设置属性); 追加和移除样式 addClass() $().addClass(); removeClass()$().removeClass(); 切换样式 toggleClass() $().toggleClass(); 判断是否含指定的样式 hasClass() $().hasClass(); 总结:
2.内容操作 HTML代码操作 html()可以对HTML代码进行操作,类似于JS中的innerHTML $().html(); 获取元素中的html代码 $().html(设置元素中的html代码); 标签内容操作 text() $().text(); 获取元素中的文本内容 $().text(设置元素中的文本内容); Html()和text()方法区别
属性值操作 val() $().val(); 获取元素的vallue属性值 $().val(设置元素的value属性值); 3.节点操作 查找节点 创建节点 工厂函数$()用于获取或创建节点 $(selector):通过选择器获取节点 $(element):把DOM节点转化成jQuery节点 $(html):使用HTML字符串创建jQuery节点 总结: A.document.write()只能以整个文档为单位操作,并且在页面加载完成过后调用会导航整个页面重绘不推荐使用。 B.document.innerHTML在数组拼接下速度相比document.createElement()快1倍左右。 C.document.innerHTML在程序处理嵌套结构时结构不如document.createElement()清析。 D.日常使用推荐document.createElement()在处理数据时结构更清晰,方便后期维护并且现在出现有大量数据需要网页显示,一般都是通过分页显示,同时不显示大量数据,当出现有大量数据又需要同时在网页显示性能优先可以考虑document.innerHTML
插入节点 Append(cotent) appendTo(content)
prependTo(content)
After(content) insertAfter(con)
insertBefore(con) 1、append()和appendTo():在现存元素的内部,从后面插入元素 2、prepend()和prependTo():在现存元素的内部,从前面插入元素 3、after()和insertAfter():在现存元素的外部,从后面插入元素 4、before()和insertBefore():在现存元素的外部,从前面插入元素
删除节点 remove()删除整个节点 Empty()清空节点内容 替换节点 replaceWith()、replaceAll() 复制节点 clone()用于复制某个节点 [参数ture或flase, true复制事件处理,flase时反之] 4.属性操作 获取与设置元素属性 attr()用来获取与设置元素属性 删除元素属性 removeAttr()用来删除元素的属性 5.节点遍历 遍历子元素 children() $(selector).children(); 遍历同辈元素 next() 获取紧邻匹配元素之后的元素 Prev() 获取紧邻匹配元素之前的元素 Slibings() 获取位于匹配元素前面和后面的所有同辈元素 遍历前辈元素 parent() 获取元素的父级元素 Parents() 获取元素的祖先元素 其他遍历方法 each() 规定为每个匹配元素规定运行的函数 End() 结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态 6.CSS-DOM操作 Css() Height() 设置或返回匹配元素的高度 Width() 设置或返回匹配元素的宽度 Offset() 返回一像素为单位的top和left坐标 offsetParent() 返回最近的已定位祖先元素。定位元素指的是元素的css position值被设置为relative、absolute或fixed的元素 Position() 返回第一个匹配元素相对于父元素的位置 scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移 scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移 |
|
来自: 昵称70680357 > 《待分类》