jQuery中的一些基本操作总结

前言：

jQuery，顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。

$ 是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

jQuery 对象不能使用 DOM 对象的属性和方法，DOM 对象也不能使用 jQuery 对象的属性和方法。

dom 对象转化为 jQuery 对象：

$( DOM 对象 ) 就可以转换成为 jQuery 对象

jQuery 对象转为 dom 对象

jQuery 对象[下标]取出相应的 DOM 对象

文章目录

一.DOM操作

1.DOM属性操作

2. attr()与prop()的区别：

3.DOM 的增删改

二.CSS 样式操作

三.jQuery 效果

1.基本效果

2.滑动效果

3.淡入淡出效果

4.上述三组方法的共同点

四.`$( function(){} )`和`window.onload = function(){}`的区别

1.他们分别是在什么时候触发?

2.他们触发的顺序?

3.他们执行的次数?

4.代码演示：

五.jQuery 事件操作

六.事件冒泡与javaScript 事件对象

1.事件的冒泡

2.javaScript 事件对象

2.1原生javascript获取事件对象

2.2jQuery 代码获取事件对象

2.3事件对象event举例

一.DOM操作

1.DOM属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。 跟 DOM 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。 跟 DOM 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。 跟 DOM 属性 value 一样。

示例：

a.html() //取出a的html值 a.html(val) //让a的html值变为val a.text() //取出a的text值 a.text(val) //让a的文本值变为val a.val() //取出a的val值（input） a.val(v) //设置a的value值为v //val实战举例： // 操作单选 $(":radio").val(["radio2"]); // 批量操作多选框的选中状态 $(":checkbox").val(["checkbox3","checkbox2"]); // 操作单选的下拉框选中状态 $("#single").val(["sin2"]); // 批量操作多选的下拉框选中状态 $("#multiple").val(["mul2","mul3","mul4"]);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等 ；

attr 方法还可以操作非标准的属性。比如自定义属性:abc，edf。

removeAttr('xxx') 移除xxx属性值。

prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等。

removeProp('xxx') 移除xxx属性值。

示例：

a.attr('name') //取出a的name值 a.attr("name","username") //把a的name值设置为username a.attr("yushiwen","123") //把a的自定义属性yushiwen的值设置为123 a.removeAttr('class') //移除a的class属性 a.prop('id') //取出a的id值 a.prop('id',"wh") //设置a的id值为wh a.removeProp('class') //移除a的class属性

1

2

3

4

5

6

7

2. attr()与prop()的区别：

当取得checked属性的值时，如果checked属性设置了，如下：

attr()会返回checked，prop()会返回true，如下：

当取得checked属性的值时，如果checked属性没有设置，如下：

attr()会返回undefined，prop()会返回false，如下：

undefined到底是什么呢，官方觉得返回undefined是一个错误，

所以我们在操作checked属性时，应该使用prop()方法。

同理readOnly、selected、disabled 等等属性与checked是一样的，对它们进行操作时应该使用prop()方法。

3.DOM 的增删改

内部插入：

appendTo() ，如a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素

prependTo()，如a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入:

insertAfter() ，如a.insertAfter(b) 得到 ba

insertBefore()，如a.insertBefore(b) 得到 ab

替换:

replaceWith()， 如a.replaceWith(b)

用 b 替换掉 a，注意这里是用 b 替换掉 a

replaceAll()，如a.replaceAll(b) 用 a 替换掉所有 b

删除:

remove() ，如a.remove(); 删除 a 标签

empty() ，如 a.empty();清空 a 标签里的内容

二.CSS 样式操作

css() 读取或写入匹配元素的样式属性

addClass() 为元素添加一个或多个class值

removeClass() 删除样式，删除元素的class值；传递一个或多个具体的class值，就会删除具体的某个或多个class；不传值就是移除所有的class值。

toggleClass() 对被选元素进行添加/删除类的切换操作， 切换就是如果具有该类那么删除，如果没有那么添加上

offset() 获取和设置元素的坐标。

示例：

a.css('color') //取出a元素的color a.css('color',"red") //设置a元素的color为red //实战演示 //addClass() - 向被选元素添加一个或多个类，下述示例添加多个 $('div:first').addClass("redDiv blackDiv"); //removeClass() - 从被选元素删除一个或多个类 ，下述示例删除多个，也就是所有class $('div:first').removeClass(); //toggleClass() - 对被选元素进行添加/删除类的切换操作 ,切换就是如果具有该类那么删除，如果没有那么添加上 $('div:first').toggleClass("redDiv"); //offset() - 返回第一个匹配元素相对于文档的位置。 var os = $('div:first').offset(); //注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距 alert("顶边距："+os.top+" 左边距："+os.left); //调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left //offset({ top: 10, left: 30 }); $('div:first').offset({ top:50, left:60 });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

三.jQuery 效果

1.基本效果

show() 将隐藏的元素显示

hide() 将可见的元素隐藏。

toggle() 可见就隐藏，不可见就显示。

2.滑动效果

slideDown() 方法用于向下滑动元素。

slideUp() 方法用于向上滑动元素。

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

3.淡入淡出效果

fadeIn() 淡入(慢慢可见)

fadeOut() 淡出(慢慢消失)

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明

fadeToggle() 淡入/淡出 切换

4.上述三组方法的共同点

以上方法都可以添加参数。

第一个参数是动画 执行的时长，以毫秒为单位

第二个参数是动画的回调函数 (动画完成后自动调用的函数）

四.$( function(){} )和window.onload = function(){}的区别

1.他们分别是在什么时候触发?

$( function(){} )是在jQuery 的页面加载完成之后，也就是浏览器的内核解析完页面的标签，创建好 DOM 对象之后就会马上执行。

window.onload = function(){}是在原生 js 的页面加载完成之后，也就是除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。（如iframe和img等标签）

2.他们触发的顺序?

$( function(){} )是在 jQuery 页面加载完成之后先执行

window.onload = function(){}是在原生 js 的页面加载完成之后

也就是说$( function(){} )比window.onload = function(){}早执行

3.他们执行的次数?

$( function(){} )是jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

window.onload = function(){}是原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。

4.代码演示：

代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

输出结果：

五.jQuery 事件操作

click() 它可以绑定单击事件，以及触发单击事件。后来添加的元素不会绑定事件

mouseover() 鼠标移入事件。后来添加的元素不会绑定事件

mouseout() 鼠标移出事件。后来添加的元素不会绑定事件

bind() 可以给元素一次性绑定一个或多个事件。后来添加的元素不会绑定事件

one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。

unbind() 跟 bind 方法相反的操作，解除事件的绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

示例：

$("h5").click(function () { // 传function是绑定事件 alert('h5单击事件 == click方法绑定') }); $("h5").click(); // 不传function是触发事件 //鼠标移入 $("h5").mouseover(function () { console.log("你进来了") }); //鼠标移出 $("h5").mouseout(function () { console.log("你出去了") }); // 给元素绑定事件，绑定事件可以链式操作 // jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }) $(".head").click(function(){ $(".content").toggle(); }).mouseover(function(){ $(".content").toggle(); }); //jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来 //type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法 //bind(事件字符串,回调函数),后来添加的元素不会绑定事件 //使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件 $(".head").bind("click mouseover",function(){ $(".content").toggle(); }); //one()只绑定一次,绑定的事件只会发生一次 one(type,[data],fn)函数把元素和事件绑定起来 //type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法 $(".head").one("click mouseover",function(){ $(".content").toggle(); }); //live方法会为现在及以后添加的元素都绑定上相应的事件 $(".head").live("click",function(){ $(".content").toggle(); }); $("#panel").before("

什么是jQuery?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

六.事件冒泡与javaScript 事件对象

1.事件的冒泡

什么是事件的冒泡?

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢?

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

2.javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢?

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。

//原生javascript获取 事件对象 window.onload = function () { document.getElementById("areaDiv").onclick = function (event) { console.log(event); } }

1

2

3

4

5

6

输出结果：

//JQuery代码获取事件对象 $(function () { $("#areaDiv").click(function (event) { console.log(event); }); });

1

2

3

4

5

6

可以看到两者内容是差不多的，只不过jQuery 代码获取事件对象把原生javascript获取事件对象包装了一下。

使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件

$("#areaDiv").bind("mouseover mouseout",function (event){ if (event.type == "mouseover") { console.log("鼠标移入"); } else if (event.type == "mouseout") { console.log("鼠标移出"); } });

1

2

3

4

5

6

7

JavaScript jQuery

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。