目录
⛽️ 好好学习 天天向上 ⛽️
一、jQuery属性操作
1.1、设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href,比如<input>元素里面的type
- 获取属性值 element.prop("属性名")
$("a").prop("href") //获取了a标签里的href属性
- 设置属性值 element.prop("属性名","属性值")
$("a").prop("title","我们都挺好") //将a标签里面的title属性修改为我们都挺好
1.2、设置或获取元素元素自定义属性值 attr()
属性是自己定义的,该方法也可以获取H5自定义属性 data-index 以data-开头的属性
- 获取属性值 element.attr("属性名")
$("div").attr("data-index")
- 设置属性值 element.attr("属性名","属性值")
$("div").attr("index","2")
1.3、数据缓存 data()
data()方法可以在指定的元素上存放数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移出。这个里面的数据是存放在元素的内存里面,存放的属性当做一个变量来看
$("span").data("uname","andy");
同时还可以读取html5自定义属性data-index,得到的是数字型 与attr不同的是得到的是数字型的1
$("div").data("index")
二、jQuery内容文本值
主要针对元素的内容和表单的值操作
2.1、普通元素内容 html() / text()
- html() 获取和设置元素的内容
相当于原生innerHTML,获取的内容是带有标签的
element.html() //获取元素的内容
element.html("内容") //设置元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
</head>
<body>
<div>
<span>你好呀</span>
</div>
<script>
var div = $("div").html();
$("div").html("我是被设置的值");
console.log(div);
</script>
</body>
</html>
结果展示
- text() 普通元素文本内容
相当于原生innerText ,只输出里面的内容
element.text() //获取元素的内容
element.text("内容") //设置元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
</head>
<body>
<div>
<span>你好呀</span>
</div>
<script>
var div = $("div").text();
$("div").text("我是被设置的值");
console.log(div);
</script>
</body>
</html>
结果展示
2.2、特殊的表单值 val()
相当于原生value值
$("input").val() //获取表单里面的值
$("input").val("内容") //设置表单里面的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
</head>
<body>
<input type="text" value="你好">
<script>
$("input").val("改变");
console.log($("input").val());
</script>
</body>
</html>
结果展示
三、jQuery元素操作
主要是遍历、创建、添加、删除元素操作
3.1、遍历元素 each
前面讲了jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作,就需要用到遍历
语法1:$("div").each(function(index,domEle){ XXX; })
- each()方法遍历匹配的每个元素,主要用DOM处理each每一个
- 里面的回调函数有两个参数:index是每个元素的索引号;domEle是每个DOM元素对象,不是jQuery对象
- 所以要想使用jQuery方法,需要给这个dom元素转换为jQuery对象 $(domEle)
语法2: $.each(object,function(index,element){ XXX; })
- 主要是做数据处理的 可以遍历数组可以遍历对象,如果遍历的是对象 那么i输出的是属性名;element输出的是属性值
- object是要处理的元素 $("div")
- 回调函数有2个参数:index是每个元素的索引号;element遍历的内容
方法一:
$(function () {
var arr = ["red", "green", "pink"];
$("div").each(function (i, domfile) {
$(domfile).css("color",arr[i] );
})
})
方法二:
var arr = ["red", "green", "pink"];
$.each($("div"),function(index,ele){
$(ele).css("background",arr[index]);
})
展示的效果都是一样的:
方法二遍历数组
<script>
var arr = ["red", "green", "pink"];
$.each($(arr),function(index,ele){
console.log(index);
console.log(ele);
})
</script>
3.2、创建元素
语法
var li = $("<li></li>")
3.3、添加元素
- 内部添加元素,生成之后,它们是父子关系
element.append(li) //在已有的元素后面添加元素
element.prepend(li) //在已有的元素前面添加元素
- 外部添加元素,生成之后,它们是兄弟关系
element.after(li) //在已有的元素后面添加元素
element.before(li) //在已有的元素前面添加元素
3.4、删除元素
- element.remove() //删除匹配的元素(本身)
- element.empty() //删除匹配的元素集合中所有的子节点
- element.html("") //删除匹配的元素集合中的子节点 引号里面不用写东西
综合以上 做一个小小的发布微博的案例 让大家不迷茫 ✊
当点击发布的时候,就会在ul里面创建一个li 在li里面获取表单的值,和一个a标签,当点击当前li的删除时,就会删除a标签的li
效果展示:
css部分
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
html部分
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
js部分
<script>
$(function () {
//点击发布动态的创建li
$(".btn").on("click", function () {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove();
})
})
})
</script>
四、jQuery尺寸、位置操作
4.1、 jQuery尺寸
width() / height() | 取得匹配元素宽度和高度 只算width/height |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含padding、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含padding、border、margin |
- 以上参数为空,则是获取相应值,返回的是数字型
- 如果参数为数字,则是修改相应值
- 参数是可以不用写单位的
4.2、jQuery位置
offset() | 设置或获取元素偏移 |
position() | 获取元素偏移 |
scrollTop() / scrollLeft() | 设置或获取元素被卷去的头部和左侧 |
- offset()
- offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
- 返回的是一个对象 $("div").offset().top就可以获得里面的属性值
- 修改里面的值:$(".son").offset({top:200,left:300});不会影响父盒子 如果都添加定位 得到还是距离文档的大小
- position()
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
- 只能获取偏移不能设置
- scrollTop() /scrollLeft()
- scrollTop() /scrollLeft() 设置或获取元素被卷去的头部和左侧
五、jQuery事件
5.1、事件注册
单个事件注册 ele.事件(function(){ })
5.2、事件处理
- 事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:element.on(event,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如:click或keydown ,用对象的方式添加事件类型
- selector:元素的子元素选择器
- fn:回调函数 即绑定在元素身上的侦听函数
优势:
- on()方法优势1:可以绑定多个事件,多个处理事件处理程序
- on()方法优势2: 可以事件委派操作,事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素
- on()方法优势3:动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事
如果有的事件只能触发一次,可以使用one() 来绑定事件
$("p").one("click",function(){
alert(1)
})
此时元素只能被点击一次
处理函数不一样的时候
$("div").on({
click: function () {
$(this).css("color", "red")
},
mouseenter: function () {
$(this).css("background","purple")
}
})
事件处理一样的时候:
$("div").on("mouseenter click",function() {
$(this).toggleClass("current");
})
- 事件处理 off() 解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
三个使用场景
- $("p").off() //解绑p元素所有事件处理程序
- $("p").off("click") //解绑p元素上面的点击事件 后面的foo是侦听函数名
- $("ul").off("click","li") //解绑事件委托
- 自动触发事件tigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
- $("div").click() //div会自动的触发点击事件
- $("div").trigger("click")
- $("div").triggerHandler("focus") //区别是第三种方法不会触发元素的默认行为,如果表单聚焦事件,光标不会闪烁
5.3、事件对象
这里的事件对象根js里的事件对象一致
element.on(events,[selector],function(event) { }) //event就是事件对象
//阻止默认行为
event.preventDefault() 或者 return false
//阻止冒泡
event.stopPropagetion()
<body>
<div></div>
<script>
$(function () {
$(document).on("click", function () {
alert(8)
})
jQuery("div").on("click", function (event) {
alert(1);
event.stopPropagation(); //阻止冒泡。表示文档不会被点击
})
})
</script>
</body>
六、jQuery的其他方法
6.1、jQuery的拷贝对象
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用 $.extend()方法
语法:$.extend([deep],target,object1,[objectN])
参数:
- deep如果设置为true为深拷贝,默认为false浅拷贝
- target:要拷贝的目标对象
- object:待拷贝到第一个对象的对象 可以多个
深拷贝
deep为true时为深拷贝
完全克隆(拷贝的对象,而不是地址)。修改目标对象不会影响被拷贝对象,属性不冲突则会追加,属性一样则覆盖
浅拷贝
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象,会覆盖原来的数据
<script>
$(function () {
var targetObj = {
id: 0,
mag: {
age: 20,
id: 20
}
}
var obj1 = {
id: 1,
name: "张三",
mag: {
age: 10,
id: 20
}
}
var obj = {
id: 1,
name: "andy",
mag: {
age: 10,
id: 20
}
}
$.extend(targetObj, obj1); //浅拷贝拷贝的是地址
console.log("我是浅拷贝");
console.log(obj1);
$.extend(true, targetObj, obj); //深拷贝 考的是整个对象值
targetObj.mag.age = 99;
console.log("我是深拷贝");
console.log(obj);
})
</script>
注意看两者的区别:
6.2、多库共存
jQuery使用$作为标识符,随着jQuery的流行,其他js库也会用$作为标识符,这样一起使用会引起冲突;如果不存在冲突:就是多库共存
解决方案
- 把里面的$符号统一改为jQuery.比如jQuery("div")就不会发生冲突
- jQuery变量规定新的名称:$.noConflict() ; var xx=$.noConflict(); xx("span") ,,xx相当于我们自己定义的$
jQuery的基础知识就讲到这里啦!一定要三步曲哟 点赞👍 评论 👋 收藏⭐️