jQuery上篇:juejin.cn/post/710120…
属性操作
固有属性prop()
获取属性值: $('div'). prop('属性名')
设置属性值: $('div'). prop('属性名','属性值')
注意:固有(内置)属性,元素本身自带的,比如a中的href,img中的src,更适合操作表单属性:disabled / checked / selected
示例
<body>
<a href="https://juejin.cn/post/7101200697546244104" title="啦啦啦">哈哈哈</a>
<input type="checkbox" name="" id="" checked>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));//https://juejin.cn/post/7101200697546244104
//设置属性值(给title设置值)
$("a").prop("title", "我们都挺好");
$("input").change(function() {
//获取复选框的属性值
console.log($(this).prop("checked"));
});
})
</script>
</body>
自定义属性attr()
获取属性值: $('div'). attr('属性名')
设置属性值: $('div'). attr('属性名','属性值')
注意: attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)
示例
<body>
<div index="0" data-index="8">我是div</div>
<span>123</span>
<script>
$(function() {
console.log($("div").prop("index"));//underfined
// 元素的自定义属性 attr()
//1、获取div属性index的值
console.log($("div").attr("index"))//0
//2、设置div属性index的值
$("div").attr("index", 4)//4
//3、获取 H5 自定义属性
console.log($("div").attr("data-index"))//8
})
</script>
</body>
数据缓存data()
获取数据: data('属性名')
设置数据: data('属性名','属性值') ,存在内存中,我们实际看不到
注意: 可以读取 H5 自定义属性 data-index ,第一个不用写data-,返回的是数字型
示例
<body>
<div data-index="6"></div>
<span>567</span>
<script>
$(function() {
//1、设置数据,这个里面的数据存放在元素的内存中,实际看不懂
$("span").data("uname", "lili");
console.log($("span").data("uname"))//uname lili
// 2、获取data-index h5自定义属性 不用写data- , 且返回的是数字型
console.log($("div").data("index"))//6
})
</script>
</body>
文本属性
普通元素内容html()
获取元素的内容:html( )
设置元素的内容: html("内容”)
注意: 识别标签,将标签、内容一起打印出来(有父级情况),若没有父级,只有一个单独标签(即jQuery)打印出来只有内容jQuery,无标签,此时也可用text()
示例
<body>
<div>
<span>jQuery</span>
</div>
<input type="text" value="请输入内容">
<script>
// 获取设置元素内容 html()
console.log($("div").html());//<span>jQuery</span>
//给div设置值123,页面上就会显示出123
$("div").html("123");//123
</script>
</body>
元素文本内容text()
获取元素的内容:text( )
设置元素的内容: text("内容”)
注意: 不识别标签,
示例
<div>
<span>jQuery</span>
</div>
<input type="text" value="请输入内容">
<script>
// 获取设置元素文本内容 text()
console.log($("div").text())//jQuery
//给div设置值123,页面上就会显示出123
$("div").text("123");//123
</script>
表单的值val()
获取元素的内容:val( )
设置元素的内容: val("内容”)
示例
<body>
<input type="text" value="请输入内容">
<script>
// 获取表单值 val()
console.log($("input").val())//请输入内容
// 设置表单值
$("input").val("123");//123
</script>
</body>
元素操作
遍历元素each()
语法一
$('div').each(function(index,domEle){
//执行语句,index是索引,domEle是元素(即打印出标签+标签里的内容)
})
注意:
- each()方法遍历匹配的每一个元素,主要用DOM处理
- 里面的回调函数有2个参数,index是每个元素的索引,demEle是每个DOM元素对象,不是jquery对象
- 要想使用jquery方法,需要给这个dom元素转换为Jquery对象 $(domEle)
示例
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
var sum = 0;
var arr = ["red", "blue", "pink"];
$("div").each(function(i, domEle) {
// 0 <div style="color: red;">1</div>
// 1 <div style="color: blue;">2</div>
// 2 <div style="color: pink;">3</div>
console.log(i,domEle)//索引及当前dom元素
// 使用jquery方法,需要给这个dom元素转换为Jquery对象$(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);//6
})
</script>
</body>
语法二
$.each(Obj,function(index,element){
//执行代码index是索引,element是元素
})
注意
- $.each()方法可用于遍历任何对象,主要用于数据处理,比如数组对象
- 里面的函数有2个参数,index索引,elment遍历内容
- 用于遍历JQuery对象中的每一项,回调函数中元素为DOM对象,想要使用Jquery方法需要转换
示例
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
var sum = 0;
var arr = ["red", "blue", "pink"]
// $.each() 方法遍历元素 主要用于遍历数据,处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);//索引
// console.log(ele);//dom元素
// });
// $.each(arr, function(i, ele) {
// console.log(i);//索引
// console.log(ele);//对应的值
// })
var obj={
name: "yy",
age: 18
}
$.each(obj, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 yy 18 属性值
})
})
</script>
</body>
创删改除元素
创建元素
var li=$('<li></li>')
添加元素
内部添加
1、把内容放在匹配元素后面,类似原生appendChild
元素.append('内容')
2、把内容放在匹配元素前面
元素.prepend('内容')
注意: 内部添加,父子关系
外部添加
1、把元素放在目标元素后面
元素.after('内容')
2、把元素放在目标元素前面
元素.before('内容')
注意: 外部添加,兄弟关系
删除元素
1、删除匹配元素本身
元素.remove()
2、删除匹配的元素中所有的子节点
元素.empty()
3、清空匹配的元素内容
元素.html('')
注意:empty()、html()两者作用等价,只不过html还可以设置内容
获取索引
元素.index()//注意:必须是亲兄弟
滚动操作
尺寸操作
语法
位置操作
offset()
offset( )方法设置或获取元素偏移;
- offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系;
- 该方法有两个属性left 、top, ****offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离;
- 可以设置元素的偏移:offset( { left:10,left:30})。
position()
- position( )方法用于返回被选元素相对于带有定位父级偏移坐标,如果父级没有定位,则以文档为准;
- 该方法有两个属性left 、top, offset().top用于获取距离定位父级顶部的距离,offset().left用于获取距离定位父级左侧的距离;
- 该方法只能获取。
scrollTop()/scrollLeft()
scrollTop( )/scrollLeft( ) 设置或获取元素被卷去的头部和左侧
- scrollTop( )方法设置或返回被选元素被卷去的头部;
- 不跟参数是获取,参数为不带单位的数组则是设置被卷去的头部。
jQuery 事件
jQuery 事件注册
语法
元素.事件(function(){})//$("div").click(function(){})
比如:mouseover、mouseout、blur、change、keydown、keyup 、resize、scroll等
jQuery 事件处理
on() 绑定事件
1、on可以绑定1个或者多个事件处理程序
绑定1个事件
$('div').on('mouseover', function () {
$(this).css('background', 'red')
})
绑定多个事件
$('div').on({
mouseenter: function () {
$(this).css('background', 'skyblue')
},
click:function(){
$(this).css('background','blue')
},
mouseleave:function(){
$(this).css('background','red')
}
})
2、on可以实现事件委托(冒泡)【重点】
$("ul").on("click", "li", function() {
alert(11);
});
3、on给未来动态创建的元素绑定事件【重点】
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后创建的</li>");
$("ol").append(li);;
off() 事件解绑
off() 方法可以移除通过on()方法添加的事件处理程序
$('p').off()//解绑p元素所有事件处理程序
$('p').off('click')//解绑p元素上的点击事件
$('ul).off('click','li')//解绑事件委托
one()只触发一次
$("p").one("click", function() {
alert(11);
})
trigger() / triggerHandler()事件触发
语法
第一种trigger()
元素.click() //第一种简写形式
元素.trigger("type")//第二种自动触发模式
提示
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();//会触发元素的默认行为
// 2. 元素.trigger("事件")
$("div").trigger("click");//会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("how are you");
});
//表单自动聚焦,并显示how are you
$("input").trigger("focus");
});
</script>
</body>
第二种 triggerHandler()
元素.triggerHandler("type")//第三种自动触发模式
triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别
提示
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("how are you ");
});
$("div").triggerHandler("click");//触发点击事件
// $("input").triggerHandler("focus");未获取焦点,但显示了表单值how are you
});
</script>
</body>
jQuery 事件对象
语法
元素.on(events,[selector],function(event){})
阻止默认行为:event.preventDefault( )或者return false
阻止冒泡: event.stopPropagation( )
jQuery 拷贝对象
语法
$.extend([deep],target,object1,[objectN])
- deep:如果设置为true为深拷贝,默认为false浅拷贝
- target: 要拷贝的目标对象
- object1: 待拷贝到第一个对象的对象
- objectN:待拷贝到第N个对象的对象
- 浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响拷贝对象
- 深拷贝,前面加true,完全克隆,修改目标不会影响被拷贝对象
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "yy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);//{id: 1, name: "andy"}
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj); //{id: 1, name: "andy"}
})
</script>
jQuery 多库共存
概念:保证旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现
语法
1:把里面的$符统一改成jQuery,比如jQuery(‘div’)
<button>点击</button>
<p></p>
//jQuery使用$符号,作为jQuery的简写
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
2:jQuery变量规定新的名称:$.noConfict( )
<button>点击</button>
<p></p>
var jq = $.noConflict();//会释放对$标识符的控制
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
参数传递
可以把$符号作为变量,传递给ready方法
可以在函数内使用
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
jQuery 插件
jQuery 插件常用的网站
jQuery 插件库 www.jq22.com/
jQuery 之家 www.htmleaf.com/
jQuery 自定义插件
自定义插件链接:juejin.cn/post/710077…
---------------------------------完成-------------------------------------------