jQuery简介
要想使用jQuery,需要现在jq官网上下载jquery-.js和jquery-.min.js两个压缩包中的一个,
jquery-.min.js中只有两句话,jquery-.js中内容较多有源码,方便查看在此前提下
方可继续jquery的使用
JS中有基础语法 DOM
在JQ中,JQ可以认为是另一种DOM
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
.item{
width:px;
height:px;
background-color:red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
获取元素
jQuery中通过$("选择器") 获取与选择器相匹配的所有元素
修改样式
设置一个属性
需要先获取元素 然后将字体颜色设置为蓝色 所有类名为
$(".item").css("color","blue");
设置多个属性
$(".item").css({
"background-color":"blue",
"margin-left":"50px",
"margin-top":"30px",
"border":"1px black solid"
});
所有写值的地方都可以换成function函数,reurn的返回值就是设置的值
$(".item").css("width",function(index,value){
console.log(index,value); // 结果为 "100px" "100px"
return (index+)*; // 第一次返回 第二次返回
});
获取元素属性 只能获取到第一个
设置元素属性 是对所有的元素生效
console.log($(".item").css("width")); //结果:打印的是第一个div的宽度px
修改内容
有html text val 三种,分别相当于js中的innerHTML(用于div,解析标签) innerText(用于div,不解析标签) value(用于输入框)
console.log($("div").html()); // 结果为1
$("div").html("this is <p>a bird</p>");
// 结果如图:图1
$("div").html(function(){
return "this is a function" + ;
});
// 结果如图:图2
图1
图2
原生js对象和jquery js对象
js是动态的弱类型语言,是javaScript的缩写,而jquery是对js的封装,扩展,jquery是
使用js封装的框架,就是让jquery更方便.
通过JQ选择器获取的对象是JQ对象
通过原生方法获取到的是原生js对象
JQ对象只能调用JQ的方法,原生对象只能调用原生的方法,当调用对方的方法时,是无效的
但是JQ和JS可以混编
如何将原生js转换为jquery的js:通过在原生js外围加上$ 例如:$(原生js)
通过在jquery的js后面加上get(index)或者[index]来获取该jquery对象所对应的原生js
原生js对象就是DOM对象
例如:jq对象调用原生js方法 刷新后是没有效果的
$("div").innerHTML = "123";
改为js对象,如下,则又效果,不过是针对下标为的div
$("div")[].innerHTML = "234"; // 如图3
js原生对象调取jq方法也是没有效果的
var item = document.getElementsByClassName('item')[];
item.html = "456"; // 刷新页面后没有效果 并且不会报错
item.innerHTML = "678"; // 针对第二个div有效 结果如图4
jq对象转js原生对象实例
$("div")[].innerHTML = "jq对象转原生对象";
$("div").get().innerHTML = "这个也是jq对象转原生对象"; //结果如图5
js原生对象转jq对象实例
$(item).css("background-color","red"); // item代表第二个div,所有第二个div背景色为红色 如图6
js原生对象和jq对象混编使用 示例:外面是js,里面是jq
item.onclick = function(){
$(item).css("background-color","pink");
}
结果如图
JQ里获取第几个对象用属性eq eq获取的是JQ对象 从而不必对所有div起作用
$(".item").eq().html("用eq获取的JQ对象"); // 获取第一个div 并设置里面的内容
结果如图
图3
图4
图5
图6
图7 点击前如图6
图8
jq中的end属性
破坏性操作和回到破坏性元素之前
如正常代码为:
$(".item").css("background-color","green").html("正常显示");
结果如图:
当出现父级元素时,后面继续接着写属性,则属性是加给父级元素的
破坏性代码为:$(".item").css("background-color","green").parent().css("border","1px black solid");
结果如图:
现在想把属性加到本类身上而不是父类身上,可用end()属性
代码为:$(".item").css("background-color","green").parent().css("border","1px black solid").end().css("height","200px");
结果如图:
图9
图10
图11
移交$的控制权
jQuery(".item")等价于 $(".item")
var pp = jQuery.noConflict(); // 这句代码作用后,以后代码$符号没有作用,上面的点击事件,代码运行
完,后再点击,此时控制权在pp身上,如果之前设置的点击事件发生将会出错
pp(".item"); // 正确代码,不会出错
$(".item"); // 错误代码,会显示错误
以上讲解的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
.item{
width:px;
height:px;
background-color:red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(".item").css("color","blue");
$(".item").css({
"background-color":"yellow",
"margin-left":"50px",
"margin-top":"30px",
"border":"1px black solid"
});
$(".item").css("width",function(index,value){
console.log(index,value);
return (index+)*;
});
console.log($(".item").css("width"));
console.log($("div").html());
$("div").html("this is <p>a bird</p>");
$("div").html(function(){
return "this is a function" + ;
});
$("div").innerHTML = "123";
$("div")[].innerHTML = "234";
var item = document.getElementsByClassName('item')[];
item.html = "456";
item.innerHTML= "678";
$("div")[].innerHTML = "jq对象转原生对象";
$("div").get().innerHTML = "这个也是jq对象转原生对象";
$(item).css("background-color","red");
item.onclick = function(){
$(item).css("background-color","pink");
}
$(".item").eq().html("用eq获取的JQ对象");
$(".item").css("background-color","green").html("正常显示");
$(".item").css("background-color","green").parent().css("border","1px black solid").end().css("height","200px");
var pp = jQuery.noConflict();
pp(".item");
</script>
</html>
不接着上面的div写,重新建立html重新开始写 创建元素
创建新的元素对象
$("<div></div>").html();
创建对象并将此元素添加进body中
$("<div></div>").html("新的jq对象").appendTo($("body"));
$("div").css({
"border":"1px red solid",
"width":"100px",
"height":"100px",
"background-color":"red"
})
结果如图
图12
添加元素
A.append(B) A里面添加B A是父级
A.appendTo(B) 把A加到B里面 B是父级
A.after(B) A后面添加B A在前面
A.insertAfter(B) 把A插入B后面 B在前面
删除元素
remove() 删除元素,同时清空绑定的事件 删除被选元素及其子元素
empty() 删除元素内容,同时元素本身还在
detach() 删除元素,不清空绑定事件
JQ对象设置属性
prop 与 attr
prop():
如果有相应的属性,返回指定属性值
如果没有相应的属性,返回值是空字符串
设置属性时,不会改变html结构:如图
attr():
如果有相应的属性,返回属性值
如果没有相应的属性,返回值是underfined
设置属性时,会改变html结构:如图
对于HTML本身就带有的固有属性,在处理时,使用prop方法
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法
具有true和false两个属性的属性,如checked.selected,或者disabled使用prop()
图13
上述完整代码
图14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<style type="text/css">
.item{
margin-left:px;
width:px;
height:px;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$("<div></div>").html("新的jq对象").appendTo($("body"));
$("div").css({
"border":"1px red solid",
"width":"100px",
"height":"100px",
"background-color":"red"
})
$(".item").attr("dsf","这是提示信息");
</script>
</html>
筛选
过滤
eq(index|-index)
获取当前链式表中的第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个,
当参数为负数时为反向选取,如-1为倒数第一个,类似的有get(index),不过get(index)返回的是DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<p>This is just a test</p>
<p>So is this</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($("p").eq()[]);
console.log($("p").eq(-)[]);
</script>
</html>
结果如图13:
图13
filter(expr|obj|e|e|fn)
筛选出与指定表达式匹配的元素集合
这个方法用于缩小匹配的范围,用逗号分隔多个表达式
<body>
<p>Hello</p>
<p class="selected">Hello Again</p>
<p class="selected">And Again</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 保留带有selected的元素
console.log($("p").filter(".selected")[]);
console.log($("p").filter(".selected")[]);
</script>
结果如图14:
图14
children([expr])
查找div中的每个子元素
<body>
<p>Hello</p>
<p>
<div>
<span>Hello Again</span>
</div>
</p>
<p>And Again</p>
</body>
<script type="text/javascript">
console.log($("div").children()[]);
console.log($("div").children()[]);
</script>
结果如图15:
图15
find(e|o|e)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
<body>
<p>
<span>Hello</span>
,how are you?
</p>
</body>
<script type="text/javascript">
console.log($("p").find("span")[]);
console.log($("p").find("span")[]);
</script>
结果如图16:
图16