标签：jQuery 常用 元素 获取 API 参数 选择器 属性

@

目录

• 1. jQuery 选择器
  • 基础选择器
  • 层级选择器
  • 筛选选择器
  • 筛选方法
• 2. jQuery 样式操作
  • 操作 css 方法
  • 设置类样式方法
• 3. jQuery 动画效果
  • ① 显示隐藏效果
    • show() 显示
    • hide() 隐藏
    • toggle() 显示隐藏切换
  • ② 滑动效果(动画)
    • slideDown() 下滑效果
    • slideUp() 上滑效果
    • slideToggle() 滑动切换效果
  • ③ 事件切换 hover()
  • ④ stop() 动画队列及其停止排队方法
  • ⑤ 淡入淡出效果
    • fadeIn() 淡出效果
    • fadeout() 淡入效果
    • fadeToggle() 淡入淡出切换效果
    • fadeTo() 渐进方式调整到指定的不透明度
  • ⑥ animate() 自定义动画
• 4. jQuery 属性操作
  • prop() 设置或获取元素固有属性值
  • attr() 设置或获取元素自定义属性值
  • data() 数据缓存
• 5. jQuery 内容文本值
  • html() 普通元素内容
  • text() 普通元素文本内容
  • val() 表单的值
• 6. jQuery 元素操作
  • ① each() 遍历元素
    • 语法1
    • 语法2
  • ② 创建元素
  • ③ 添加元素
    • append() / prepend() 内部添加
    • after() / before() 外部添加
  • ④ remove() / empty() 删除元素
• 7. jQuery 尺寸、位置操作
  • ① jQuery 尺寸
  • ② jQuery 位置
    • offset() 设置或获取元素偏移
    • position() 获取元素偏移
    • scrollTop() / scrollLeft() 设置或获取元素被滚动的头部和左侧
• 8. jQuery 拷贝对象
  • $.extend()

---

1. jQuery 选择器

基础选择器

jq获取节点元素对象统一标准

$("选择器") // 里面选择器直接写 CSS 选择器即可， 但是要加引号
//返回值为一个jquery对象，伪数组形式存储

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的Ii元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的Ii元素中，选择索引号为偶数的元素
:checked	$("input:checked")	查找被选中（比如复选框的checked=true）的表单元素
:selected	$("option:selected")	查找被选中的列表<option selected="selected"></option>

筛选方法

语法	用法	描述
☆parent()	$("1i").parent();	查找最近的父级
☆parents(selector)	$(".son").parents(); $(".son").parents('.father');	查找指定选择器的父级，若不指定选择器则返回所有的父级元素
☆children(selector)	$("u1").children("li");	相当于$("ul>li"),查找最近一级子元素
☆find(selector)	$("u1").find("li");	相当于$("ul li"),后代选择器
☆siblings(selector)	$(".first").siblings("li");	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
☆eq(index)	$("1i").eq(2);	相当于$("li:eq(2)"), index从0开始

注意：

可以通过jq对象.index()访问被封装的jq对象中的每个节点对象的索引号

注意：只有同级元素它们之间的index从0开始排列

比如

<div>
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
    <button>4</button>
</div>
<ul>
	<li><a href="#">a</a></li>
	<li><a href="#">b</a></li>
	<li><a href="#">c</a></li>
</ul>
<script>
        $("div a").click(function() {
            console.log($(this).index());
            // 0 1 2
        })
    	console.log($("button").index());// 3
    
        $("ul a").click(function() {
            console.log($(this).index());
            // 0 0 0
        })
</script>

2. jQuery 样式操作

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

操作 css 方法

1. 参数只写属性名，则是返回属性值

   $(this).css("color");
   

2. 参数是属性名， 属性值，逗号分隔， 是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

   $(this).css("color", "red");
   

3. 参数可以是对象形式， 方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

   $(this).css({ 
       color:"white",
       font-size:"20px"
   });
   

设置类样式方法

作用等同于元素对象的classList属性，可以操作类样式， 注意操作类里面的参数不要加点。

1. 添加类

   $("div").addClass("current");
   

2. 移除类

   $("div").removeClass("current");
   

3. 切换类

   $("div").toggleClass("current");
   

jquery类操作与className区别

• 原生 JS 中 className 会覆盖元素原先里面的类名。
• jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

 <div class="one"></div>

//通过className操作类名
var one = document.querySelector(".one");
one.className = "two";

//结果
// <div class="two"></div>

//通过jquery操作类名
//这个addClass相当于追加类名 不影响以前的类名
$(".one").addClass("two");  
//结果
// <div class="one two"></div>

3. jQuery 动画效果

① 显示隐藏效果

show() 显示

1. 语法规范

   show([speed,[easing],[fn]])
   

2. 参数说明

   • 参数都可以省略， 无动画直接显示或隐藏。
   • speed：三种预定速度之一的字符串("slow", "normal" , or "fast" )或表示动画时长的毫秒数值(如： 1000)。
   • easing： (Optional) 用来指定切换效果， 默认是“swing”， 可用参数“linear”。(动画函数)
   • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

hide() 隐藏

1. 语法规范

   hide([speed,[easing],[fn]])
   

2. 参数说明

   和show()里的参数情况一样

toggle() 显示隐藏切换

1. 语法规范

   toggle([speed,[easing],[fn]])
   

2. 参数说明

   和show()里的参数情况一样

建议：上述三个发方法里的参数一般都不写，直接显示隐藏即可，如果带参数，那么就会以动画的效果来改变样式，看情况需要。

② 滑动效果(动画)

slideDown() 下滑效果

1. 下滑效果语法规范

   slideDown([speed,[easing],[fn]])
   

2. 下滑效果参数

   参数与show()参数相同

slideUp() 上滑效果

1. 上滑效果语法规范

   slideUp([speed,[easing],[fn]])
   

2. 上滑效果参数

   参数与show()参数相同

slideToggle() 滑动切换效果

1. 滑动切换效果语法规范

   slideToggle([speed,[easing],[fn]])
   

2. 滑动切换效果参数

   参数与show()参数相同

③ 事件切换 hover()

hover([over,]out)

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

④ stop() 动画队列及其停止排队方法

1. 动画或效果队列

   动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止排队

   stop()
   

   • stop() 方法用于停止动画或效果，由作动画的元素对象调用。
   • 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
   • 建议：每次使用动画之前，先调用 stop() ,在调用动画

⑤ 淡入淡出效果

fadeIn() 淡出效果

1. 语法规范

   fadeIn([speed,[easing],[fn]])
   

2. 参数说明

   与show()参数情况一样

fadeout() 淡入效果

1. 语法规范

   fadeOut([speed,[easing],[fn]])
   

2. 参数说明

   与show()参数情况一样

fadeToggle() 淡入淡出切换效果

1. 语法规范

   fadeToggle([speed,[easing],[fn]])
   

2. 参数说明

   与show()参数情况一样

fadeTo() 渐进方式调整到指定的不透明度

1. 语法规范

   fadeTo([[speed],opacity,[easing],[fn]])
   

2. 参数说明

   • 参数speed、easing、fn情况与show()一样
   • opacity： 元素对象目标透明度，取值 0~1 之间。

⑥ animate() 自定义动画

• 语法

  animate(params,[speed],[easing],[fn])
  

• 参数

  • speed, easing, fn参数情况 与show()方法一样
  • params： 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
    取驼峰命名法 borderLeft。

• 注意

  只有元素才能做动画，比如$(document)是不能做动画的

4. jQuery 属性操作

prop() 设置或获取元素固有属性值

所谓元素固有属性就是元素本身自带的属性

1. 获取属性语法

   prop("属性")
   

2. 设置属性语法

   prop("属性", "属性值")
   

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

attr() 设置或获取元素自定义属性值

1. 获取属性语法

   attr("属性")// 类似原生 getAttribute()
   

2. 设置属性语法

   attr("属性", "属性值") // 类似原生 setAttribute()
   

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

data() 数据缓存

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

1. 附加数据语法

   data("name","value") // 向被选元素附加数据
   

2. 获取数据语法

   date("name") // 向被选元素获取数据
   

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

<div data-index="2"></div>
<script>
	console.log($("div").data("index"));//2
</script>

5. jQuery 内容文本值

常见操作有三种：

• html()
• text()
• val()

分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

html() 普通元素内容

$("div").html(); //获取元素的内容
$("div").html("内容") // 设置元素的内容

text() 普通元素文本内容

$("div").text(); // 获取元素的文本内容
$("div").text("文本内容"); // 设置元素的文本内容

​ 注意：html() 可识别标签，text() 不识别标签。

val() 表单的值

$("input").val() // 获取表单value属性的值
$("input").val("内容") // 设置表单value属性的值

6. jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

① each() 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

$("div").each(function (index, domEle) { 
    //xxx; 
})

• each() 方法遍历匹配的每一个元素。主要用DOM处理。

• 里面的回调函数有2个参数：

  index: 是每个元素的索引号;

  domEle: 是每个DOM元素对象，不是jquery对象

• 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

• 每遍历一个成员，执行一次回调函数。

语法2

$.each(object, function(index, element) { 
	//xxx; 
})

• $.each()方法可用于遍历任何对象。 主要用于数据处理，比如数组，对象

• 里面的回调函数有2个参数：

  index: 每个成员的索引号;

  element: 索引号对应的每个内容

② 创建元素

语法：

$("<li></li>");

动态的创建了一个 <li>

③ 添加元素

append() / prepend() 内部添加

element.append("内容");
//把内容放入匹配元素内部最后面, 类似原生 appendChild。

appendChild(newchild)，如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置；当然，append也有这个特性。

element.prepend("内容");
//把内容放入匹配元素内部最前面。

• 内部添加元素，生成之后，它们是父子关系。

after() / before() 外部添加

element.after("内容") // 把内容放入目标元素后面

element.before("内容") // 把内容放入目标元素前面

• 外部添加元素，生成之后，他们是兄弟关系。

④ remove() / empty() 删除元素

element.remove() // 删除匹配的元素（本身）

element.empty() // 删除匹配的元素集合中所有的子节点

element.html("") // 清空匹配的元素内容

• remove 删除元素本身。
• empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

7. jQuery 尺寸、位置操作

① jQuery 尺寸

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法	用法
width() / height()	不带参数，取得匹配元索content部分宽度(width)或高度(height)值
innerWidth() / innerHieght()	取得匹配元索宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元索宽度和高度值包含padding、borde、 margin

• 以上参数为空，则是获取相应值，返回的是数字型。
• 如果参数为数字，则是修改相应值。
• 参数可以不必写单位。
• 注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

② jQuery 位置

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset() 设置或获取元素偏移

• offset() 方法设置或返回被选元素相对于文档（document）的偏移坐标（top、left），跟父级没有关系。

• 该方法返回值为一个对象，这个对象有两个属性用来记录元素的偏移量

  Object{
      top: 00,
      left: 00
  }
  

  offset().top 用于获取距离文档顶部的距离， offset().left 用于获取距离文档左侧的距离。

• 可以设置元素的偏移： offset({ top: 10, left: 30 });

position() 获取元素偏移

• position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

• 该方法返回值与offset()的返回值一样

  position().top 用于获取距离定位父级顶部的距离， position().left 用于获取距离定位父级左侧的距离。

• 该方法只能获取无法设置。

scrollTop() / scrollLeft() 设置或获取元素被滚动的头部和左侧

• 方法不带参，则返回相对应的值

  $(selector).scrollTop();
  

• 方法带参，则设置相对应的值

  $(selector).scrollTop(200);//参数可不带单位
  

8. jQuery 拷贝对象

$.extend()

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.extend([deep], target, object1, [objectN])

参数说明

1. deep： 如果设为true为深拷贝，默认为false浅拷贝。
2. target：要拷贝的目标对象
3. object1：待拷贝到第一个对象的对象。
4. objectN：待拷贝到第N个对象的对象。

• 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
• 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

案例代码：

var targetObject = {
    id: 0,
    msg: {
        age: 20
    }
};
var Object1 = {
	id: 1,
    name: "andy",
    msg: {
        age: 18
    }
}    

//浅拷贝
$.extend(targetObject, Object1);
console.log(targetObject)
console.log(Object1)
/*
	//控制台输出
	targetObject {
		id: 1,
		name: "andy",
		msg: 地址值1
	}
	Object1 {
		id: 1,
    	name: "andy",
    	msg: 地址值1
	}
*/

//深拷贝
$.extend(true,targetObject, Object1);
console.log(targetObject)
console.log(Object1)
/*
	//控制台输出
	targetObject {
		id: 1,
		name: "andy",
		msg: 地址值2
	}
	Object1 {
		id: 1,
    	name: "andy",
    	msg: 地址值1
	}
*/

标签：jQuery,常用,元素,获取,API,参数,选择器,属性
来源： https://www.cnblogs.com/gh-StudyNotes/p/15848575.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。