这里记录一下JQuery中对元素的一些基本操作以及事件响应，便于以后查找。
我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。
文章目录
赋值和获取值
- 文本内容
text()用来获取，text(value)用来设置。设置是对匹配的全部元素，获取只是获取第一个元素。需要注意，设置的内容会替换掉原本的所有子元素，即使在设置的内容中包含html标签也不会解析为标签。
- html内容
html()和html(value)分别来获取和设置，和文本不同的就是可以对内容进行html解析。
- input表单值
val()和val(value)只用于表单中的input标签，值得注意的就是给多选框、单选框和下拉选框设置默认值，需要用数组，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<input type="checkbox" name="test" id="" value="a" />a
<input type="checkbox" name="test" id="" value="b" />b
<input type="checkbox" name="test" id="" value="c" />c
<script type="text/javascript">
var $test=$('[name=test]');
$test.val(['b'])
</script>
</body>
</html>
创建标签
创建标签类似于转换，直接用$()即可，比原生的document.createElement()要简洁的多
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<script type="text/javascript">
var $test=$('<h3></h3>');
$test.text('This is a test')
$('div').append($test);
</script>
</body>
</html>
插入标签
除了上面的append()，还有另外三种插入标签的方式
- append(content) - 将内容追加到元素的子元素中
- appendTo(content) - 将元素添加到内容的子元素中
- prepend(content) - 将内容插入为元素的第一个子元素
- prependTo(content) - 将元素插入为内容的第一个子元素
上面这4种方法都是在元素的内容插入，下面的4种方法是在元素的外部插入
- after(content) - 将内容追加到元素后面
- insertAfter(content) - 将元素追加到内容后面
- before(content)
- insertBefore(content)
删除标签
3种方法用于删除或者清空标签
- remove() - 从DOM中彻底删除元素及其子元素
- detach() - 同样是删除元素，但是于remove不同的是JQ对象后续还可用
- empty() - 并不删除元素，只是将元素内容清空
克隆标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<p>hello</p>
<script type="text/javascript">
var $hello=$('p');
$hello.click(()=>{
$hello.clone(true).insertAfter($hello);
})
</script>
</body>
</html>
注意这里的clone(true)的true表示连带克隆标签的事件响应，不加true则只是克隆标签本身。
添加事件还可以用bind方法，类似于原生的addEventListener
替换标签
- replaceWith(content) - 将元素用内容进行替换
- replaceAll(selector) - 用元素去替换所有的selector的元素
遍历标签
通过each(function)去便利每个元素，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<script type="text/javascript">
$('p').each(function(index){
$(this).attr('title','我是第'+(index+1)+'个p标签');
})
</script>
</body>
</html>
注意两点
- 这里的计算要加小括号，不然会从左到右执行，将两个数字都以字符串的形式拼接
- 经过测试发现，用
function(){}的匿名函数形式可以用this指代当前元素，但是用()=>{}的匿名函数形式就不可以
修改css
可以直接事先写好类的css，然后直接去修改标签的类即可达到修改css的目的
- addClass()
- removeClass()
- toggleClass()
也可以通过直接修改css样式达到目的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<script type="text/javascript">
$('p').each(function(index){
$(this).css('font-size',(index+1)*20+'px');
})
</script>
</body>
</html>
注意这里的css属性既支持camel case也支持css字段，同时传递两个参数就是赋值，只传递前面的一个参数就是获取值。
事件响应
JQ中的事件和原生的名字基本一致，例如mousedown，click，dblclick等等，主要是绑定的方式不太一样
页面加载事件
$(document).ready(function)，页面所有DOM元素加载完以后出发函数，可以简写为$(function)。JQ的这种方式和原生的window.onload()有一些区别，首先是可以有多个，会按照顺序触发，而window.onload()只会触发最后一个。然后是window.onload()需要等页面所关联的文件图片等全部下载完毕才会触发，而JQ只需要DOM元素加载完毕就会触发，会快很多。所以也需要注意，对于一些需要等待下载完成才能执行的才做，例如获取图片的宽高，就只能用window.onload()了
事件绑定的几种方式
- bind
$('p').bind('click',function(){
console.log($(this).text());
})
这里对所有的p标签都绑定了一个点击事件，点击就会打印出该p标签的内容。但是bind方法的缺点也很明显，首先，bind方法采用隐式迭代，有多少个标签就会绑定多少次，当JQ匹配的元素多了以后性能会下降。其次，bind方法对尚未存在的标签无效，也就是说页面加载完毕后，又通过某事件在页面中新建一个p标签，这个新的p标签没有绑定点击事件。所以bind方法通常用于用id去查找得到的元素
- on
on方法可以很好的解决上面bind方法遇到的两个问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<button type="button">New P</button>
<div id="">
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
</div>
<script type="text/javascript">
$('div').on('click','p',function(){
console.log($(this).text());
})
$('button').click(function(){
$('div').append($('<p>I am new</p>'))
})
</script>
</body>
</html>
这里用on方法对p元素的父元素添加事件，当点击p元素的时候事件冒泡到父元素，然后执行对应的执行函数。这里on方法的第二个参数是一个选择器，是选择添加事件的元素的子元素，如果省略就是添加事件的元素本身。即使是新建的p元素因为同样会冒泡到父元素，所以依然会响应事件。但是on方法的缺点就是在DOM层级较深的时候效率不高。
事件的移除
与上面两种绑定方式对应的移除分别是
- unbind()
$('p').unbind('click')
- off()
$('div').off('click','p')
手动触发事件
通过事件的trigger方法来手动触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<button type="button">New P</button>
<div id="">
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
</div>
<script type="text/javascript">
var a=$('button').bind('click',function(){
$('div').append($('<p>I am new</p>'))
});
a.trigger('click');
</script>
</body>
</html>
同时trigger方法还可以用数组去传递参数给回调函数
var a=$('button').bind('click',function(e,para1,para2){
$('div').append($('<p>'+para1+' '+para2+'</p>'))
});
a.trigger('click',['hello','world']);
不过要注意，因为和原生js一样，本身处理函数就有一个参数，所以，其余参数只能是从第二个开始
事件参数
和原生js一样，事件处理函数默认也有一个event参数
var a=$('button').bind('click',function(e){
console.log(e)
});
a.trigger('click',['hello','world']);
打印的内容基本和原生的一样，使用起来也是用点号
console.log(e.pageX,e.pageY);
阻止冒泡和默认行为
和原生js一样也可以用event参数来进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<body>
<div id="box1">
</div>
<script type="text/javascript">
$('#box1').bind('click',function(e){
$(this).css('background-color','yellow');
e.stopPropagation();
})
$('body').bind('click',function(){
$(this).css('background-color','yellow');
})
</script>
</body>
</html>
不过JQ中可以将两者统一操作如下
$('#box1').bind('click',function(e){
$(this).css('background-color','yellow');
// e.stopPropagation();
return false;
})
只需要在深层次的元素的处理函数中返回false就可以达到阻止冒泡和默认行为的目的
动画效果
显示和隐藏
直接用JQ元素的hide()和show()方法即可，可以不加参数，也可以加一个以毫秒为单位的时间，表示动画执行的时长，以及第二个参数做为回调函数。或者用toggle()方法自动去切换显示和隐藏的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<body>
<div id="box1">
</div>
<button type="button" id="btn1">Hide</button>
<button type="button" id="btn2">Show</button>
<button type="button" id="btn3">Change</button>
<script type="text/javascript">
$('#btn1').bind('click',function(){
$('#box1').hide(2000);
})
$('#btn2').bind('click',function(){
$('#box1').show(2000);
});
$('#btn3').bind('click',function(){
$('#box1').toggle(1000);
});
</script>
</body>
</html>
淡入淡出效果
效果和上面的显示隐藏类似，不过在动画过程中只是元素的透明度发生了，也是有下面3种方法
- fadeIn()
- fadeOut()
- fadeToggle()
滑动显示效果
- slideUp()
- slideDown()
- slideToggle()
自定义动画
自定义动画格式如下
$(selector).animate({params},speed,callback);
例如
$('#btn1').bind('click',function(){
$('#box1').animate({height: '100px',width: '100px'},1000);
})
animate方法几乎可以操作所有的css，除了颜色需要插件。同时需要注意所有的属性要用camelCase才行。
除了使用绝对值来设定动画的最终状态，还可以使用相对值，例如
$('#btn1').bind('click',function(){
$('#box1').animate({height: '+=100px',width: '+=100px'},1000);
})
这样每次点击按钮宽和高都会增加100px。
同时JQ还提供动画的队列功能，也就是依次执行多个动画
$('#btn1').bind('click',function(){
$('#box1').animate({height: '-=50px',width: '-=50px'},1000);
$('#box1').animate({left: '+=100px',top: '+=100px'},1000);
})
如果要中途停止动画可以对同一个元素使用stop方法
$('#btn2').bind('click',function(){
$('#box1').stop();
});
其中stop方法还可以传递两个布尔值的参数，分别表示是否清空动画队列，和是否跳到队列尽头，默认都是false。
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
