一、获取元素
原生 js 给我们提供了很多获取元素对象的方法，比如getElementById()、getElementByTagName()、querySelector() 和节点操作等都可以获取到我们的目标元素对象。但是原生 js 提供的接口多而杂乱且兼容性情况不一致。jQuery 则给我们封装了相对统一标准的获取元素的一些API。
1. 通过选择器获取元素对象
$(“选择器”) 里面直接将我们学过的css 选择器写进去即可得到匹配的元素对象（jQuery对象【以伪数组的形式存储】）。
var search = $("button.search"); // 获取既是button元素又有search类属性的元素（交集选择器）
里面所使用的选择器是我们css所学过的选择器内容。比如：#id、element、.class、* ；selector1,selector2,selectorN、ancestor descendant、parent>child、prev+next、prev~siblings等。
jQuery 筛选选择器：
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个 li 元素。 |
| :last | $(“li:last”) | 获取最后一个 li 元素。 |
| :eq(index) | $(“li:eq(2)”) | 获取到的 li 元素中，选择索引号为2的元素，索引号从0开始。 |
| :odd | $(“li:odd”) | 获取到的 li 元素中，选择索引号为奇数的元素。 |
| :even | $(“li:even”) | 获取到的 li 元素中，选择索引号为偶数的元素。 |
| :lt(index) | $(“li:lt(2)”) | 获取到的 li 元素中，选择索引号小于2的元素。 |
| :gt(index) | $(“li:gt(2)”) | 获取到的 li 元素中，选择索引号大于2的元素。 |
| :focus | $(“input:focus”) | 匹配当前获取焦点的表单元素。 |
这是几个比较常用的基本筛选器，其他可以查看文档了解。
2. 通过jQuery筛选方法获取（重点）
| 语法 | 用法 | 描述 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找 li 元素的父级元素。 |
| parents(selector) | $(“li”).parents(".nav"); | 查找 li 元素的祖先元素中具有 nav 类属性的元素。 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”，获取 ul 中为 li 的子元素)。 |
| find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”，获取 ul 中为 li 的后代元素)。 |
| siblings(selector) | $(“li”).siblings(“li”) | 查找兄弟节点，不包括自己本身。 |
| next([expr]) | $(“ul”).next() | 查找 ul 元素的下一个同辈元素(与之对应的有 prev() )。 |
| nextAll([expr]) | $(“ul”).nextAll() | 查找 ul 元素之后的所有同辈元素(与之对应的有 prevAll() )。 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前元素是否含有某个特定的类，如果有则返回 true，反之返回 false。 |
| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”)，index 从0开始，可以为正也可以为负。 |
| first() | $(“li”).first() | 相当于$(“li:first”)，获取第一个 li 元素，与之对应的有 last()。 |
| slice(star[,end]) | $(“li”).slice(1,3) | 获取包含索引号由 1 到 3 的对象子集。 |
其他查阅文档了解
二、样式操作
1. 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式，也可以同时修改多个样式。
-
参数只写属性名，则返回的是属性值
var color = $(this).css(“color”); // 返回元素对象的 color 属性值
-
参数是属性名,属性值；逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不跟单位和引号。
$(this).css(“color”,“red”); // 将元素的 color 属性值设置为 red 。
-
参数可以是 对象的形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({“color”:“white”,'font-size":“20px”}); // 跟我们写 css 声明块一样。注意 font-size 并不使用驼峰命名规则。
2. 设置类样式方法
- 添加类：
$(''div'').addClass("current"); - 移除类：
$("div").removeClass("current"); - 切换类：
$("div").toggleClass("current");
作用等同于以前使用的 classList ，可以操作类样式；原生 JS 中的 className 会覆盖原先里面的类名，而 JQuery 里面的类操作只是对指定类进行操作，不影响原先的类名。注意该方法里面的参数类名不需要加点。
三、属性操作
1. 设置获取元素固有属性值 prop()
- 获取属性值语法：
prop("属性"); - 设置属性值语法：
prop("属性","属性值");
2. 设置或获取元素自定义属性值 attr()
- 获取属性值语法：
attr("属性") // 类似原生 getAttribute() - 设置属性值语法：
attr("属性","属性值") // 类似原生 setAttribute() - 移除自定义属性语法：
removeAttr("属性") // 类似原生 removeAttribute()
可以获取 h5 自定义属性。
3. 数据缓存 data()
- 附加数据语法：
data("name","value") // 向被选元素附加数据 - 获取数据语法：
data("name") // 获取附加在该元素上的数据
数据缓存 data() 这个里面的数据是存放在元素的内存里面；这个方法获取h5自定义属性（data-index）不用写data- 而且返回的是数字型。
四、jQuery 内容文本值
- 普通元素的内容 html() (相当于原生 innerHTML )
$("div").html() // 获取该元素的内容
$("div").html("内容") // 设置元素的内容
- 普通元素文本内容 text() (相当于原生 innerText )
$("div").text() // 获取元素的文本内容
$("div").text("文本内容") // 设置元素的文本内容
- 表单的值 val() (相当于原生value)
$(".search").val() // 获取表单元素的值
$(".search").val("内容") // 设置表单的值
五、jQuery 元素操作
1. 创建元素
$("<li> </li>"); // 动态创建了一个 li 元素
2. 添加元素
- 内部添加
<body>
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
</body>
<script>
var newLi = $("<li>这是新创建的li元素</li>");
// element.append("内容");把内容放入匹配元素内部最后面，类似原生 appendChilld() 。
$("ul").append(newLi);
// element.prepend("内容");把内容放入匹配元素内部最前面，类似原生 insertBefore()。
$("ul").prepend(newLi);
// 注意里面的参数可以是变量（如上例）、字符串字面量、或者是文档对象（此时是对原文档对象在文档中的位置进行了移动）。例子如下：
$("p").prepend($(".foo")[0]);
// 结果如下：第一个 b 元素会被移动到指定的位置
// <p><b class="foo">Hello</b>I would like to say: </p>
// <p><b class="foo">Hello</b>I would like to say: </p>
// <b class="foo">Good Bye</b>
</script>
- 外部添加
// element.after("内容"); 把内容放入目标元素后面
// element.before("内容"); 把内容放入目标元素前面
内部添加元素，生成之后，他们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。
其他方法还有 appendTo() prependTo() insertAfter() insertBefore()
3. 删除元素
element.remove()删除匹配的元素（包括它自己）element.empty()删除匹配的元素集合中所有的子节点element.html("")清空匹配的元素内容
remove 删除元素本身。
empty() 和 html("") 作用等价，都可以删除元素里面的内容。
4. 克隆元素
<body>
<b>Hello</b><p>, how are you?</p>
<button>Clone Me!</button>
</body>
<script>
/* clone(true|false)
概述：克隆匹配的DOM元素并且选中这些克隆的副本。在想将DOM文档中元素的副本添加到其他位置时这个函数非常有用。
参数：true | false 指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。*/
// 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
$("b").clone().prependTo($("p"));
// 创建一个按钮，他可以复制自己，并且他的副本也有同样功能
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
</script>
5. 遍历元素
- $( “div” ).each( function (index, domEle) { … } )
里面的回调函数有 2 个参数：index 是每个元素的索引号；domEle 是每个DOM元素对象，不是 jquery 对象。所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象 $(domEle)
- $.each(object, function (index, element) { … } )
$.esch() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。里面的回调函数有两个参数：index 是每个元素的索引号；element 遍历内容。如果需要退出 each 循环可使回调函数返回 false，其他返回值将被忽略。
// 遍历数组，同时使用元素索引和内容
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
// 遍历对象，同时使用成员名称和变量内容
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
六、jQuery 尺寸、位置操作
1. jQuery 尺寸
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值，只包含 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值，包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值，包含 padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值，包含 padding、border、margin |
如果参数为空，则是获取相应的值，返回的是数字型数据；如果参数为数字（可不必写单位），则是修改相应值。
2. jQuery 位置
- offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有两个属性 left、top 。offset().top 获取距离文档顶部的距离；offset().left 获取距离文档左侧的距离。
- 可以设hi元素的偏移：offset( { top:10, left:30 } )
- position() 获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 该方法有两个属性 left、top 。position().top 用于获取距离定位父级顶部的距离；position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取。
- scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部。
- 不跟参数是或取，参数为不带单位的数字则是设置被卷去的头部。
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
