jQuery中的一些基本操作总结

举报
YuShiwen 发表于 2022/03/31 00:39:39 2022/03/31
【摘要】 前言: jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。$ 是jQuery的核心函数,能完成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属性操作

  • 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.代码演示:

代码:

<script type="text/javascript">

	$(function(){
		console.log(1);
	});

	$(document).ready(function () {
        console.log(2);
    });

    jQuery(function () {
        console.log(3);
    });

    window.$(function () {
        console.log(4);
    });

	window.jQuery(function () {
        console.log(5);
    });

	window.onload= function () {
        console.log(6);
    };

	onload = function (ev) {
        console.log(7);
	};


</script>


  
 
  • 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("<h5 class='head'>什么是jQuery?</h5>"); //之后动态添加元素

  
 
  • 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 传递参事件处理函数的事件对象。

2.1原生javascript获取事件对象

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

输出结果:
在这里插入图片描述

2.2jQuery 代码获取事件对象

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述
可以看到两者内容是差不多的,只不过jQuery 代码获取事件对象把原生javascript获取事件对象包装了一下。

2.3事件对象event举例

使用 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

文章来源: blog.csdn.net,作者:Mr.Yushiwen,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/MrYushiwen/article/details/113055377

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200