1 链式编程
链式编程原理:return this;jQuery选择器本身是一个jquery对象,jQuery内部利用this返回了自己本身把自己本身作为对象再返回回来,对象就继续调用方法了,所以就可以链式操作了。
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。
end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的状态。
2 隐式迭代
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
3 each()方法
有了隐式迭代,为什么还要使用each函数遍历?
大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理,这时候就用到了each方法
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素(DOM对象)
$(selector).each(function(index,element){});
Element是一个 js对象,需要转换成jquery对象
function(index,element)
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素(也可使用 "this" 选择器)
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
padding: 50px 0;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div class="each">
<button class="but">each()遍历</button>
<div class="box">
<ul>
<li>https://blog.csdn.net/muzidigbig</li>
<li>https://blog.csdn.net/muzidigbig</li>
<li>https://blog.csdn.net/muzidigbig</li>
<li>https://blog.csdn.net/muzidigbig</li>
</ul>
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//隐式迭代
$('.but').mouseover(function () {
$('li').css({'opacity':.5});
});
//回调函数中没有参数遍历当前对象
// $('.but').click(function () {
// $('li').each(function () {
// $(this).css('color','hotpink');
// })
// });
//index选择器的索引位置;element当前对象
$('.but').click(function () {
$('li').each(function (index,element) {
$(this).css('opacity',(index+1)/10);
})
});
</script>
</html>
4 jQuery插件机制:
jQuery.fn.extend(object) 返回jqAPI
概述:扩展 jQuery 元素集来提供新的方法(通常用来制作插件),定义在jQuery.fn的基础上。
参数为: 用来扩充的 jQuery 对象。
1.jquery的插件,定义在jQuery.fn的基础上
2.命名冲突的解决(立即执行函数)
3.循环jQuery对象中的每个元素
4.在函数中,将jQuery返回(this进行链式编程)
案例:
1)定义方法
2)使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
padding: 50px 0;
background-color: pink;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<div class="event">
<button class="but">jq插件</button>
<div class="box">
<p>https://blog.csdn.net/muzidigbig</p>
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
/**
1.jquery的插件,定义在jQuery.fn的基础上
2.命名冲突的解决(立即执行函数)
3.循环jQuery对象中的每个元素
4.在函数中,将jQuery返回(this)
*/
//为jq添加插件
//添加完毕后 $(secltor).插件名();如同调用jq提供的api一样使用
(function ($) {
$.fn.extend({
changeYellow: function () {
/** 在这个方法中,我们可以使用$(selector)获取jq对象
this就是我们获取的jq对象(伪数组)
注意:容易将jq对象与dom对象搞混,所以建议用$_开头一看到$_开头的就知道是jq对象
*/
var $_this = this;
function randomBg() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var a = Number(Math.random().toFixed(2));
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
$_this.each(function(index, ele) {
$(ele).css({ 'backgroundColor': randomBg() })
})
return $_this;
}
});
})(jQuery); // 立即执行函数 解决命名冲突问题
$('.but').on('click', function () {
//调用我们自定义的新函数
$('.box').changeYellow();
})
</script>
</html>
jQuery.extend(object)
案例:
1)定义jq对象
2)使用jq对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
padding: 50px 0;
background-color: pink;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<div class="event">
<button class="but">jq插件</button>
<div class="box">
<p>https://blog.csdn.net/muzidigbig</p>
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$.extend({
plus:function(a,b){return a+b;},
multi:function(a,b){return a*b},
max:function(a,b){return a>b?a:b;},
min:function(a,b){return a>b?b:a;}
});
$('.but').on('click',function () {
//调用我们自定义的jq本身对象
var $plus = $.plus(2,3);
console.log($plus);
})
</script>
</html>
补充知识:
$('selector').length 返回number;jq对象中元素的个数
jQuery.trim(str)/$.trim(str) 返回String;去掉字符串起始和结尾的空格
jQuery.extend([deep], target, object1, [objectN]) 返回值:Object;用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
过滤:is(expr|obj|ele|fn) 返回值:Boolean;根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
padding: 50px 0;
background-color: pink;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<div class="event">
<button class="but">jq插件</button>
<div class="box">
<p class="p">https://blog.csdn.net/muzidigbig</p>
</div>
<p > 你既然认准一条道路,何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
console.log($('div').length);
var str = " muzidigbig ";
console.log(str);
console.log($.trim(str));
var empty = {};
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
//将两个对象合并到第一个对象中(settins)后面对象中跟前面有重复的会把前面的给覆盖掉,若没有会添加
var marge = jQuery.extend(settings, options);
console.log(marge);
console.log(jQuery.extend(empty,settings, options));
console.log($('.box').is('li'));//false
//要通过元素与元素之间的层级关系来判断
console.log($('.box').children().is('.p'));//true
</script>
</html>
若有不足请多多指教!希望给您带来帮助!