jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装，使用 . 链式写法，提供更完善,更便捷的方法。先引入jquery文件，才能使用jquery语法，导入jQ文件的方法有两种，一种是CDN有网的时候导入，一种是本地文件导入，本地文件导入比价常用。
<script src="js/jquery.min.js"></script>
工厂函数 $()
“$()”函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象，返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。 例 :
$() 获取元素节点,需传入字符串的选择器
$("h1");
$("#d1");
$(".c1");
$("body,h1,p")
原生JS对象与jQuery对象
$("#tip") // jq对象
document.getElementById("tip") // 输出dom对象
原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
-
原生JS转换jQuery对象 $(原生对象)，返回 jQuery 对象
$(document.getElementById("tip")) // dom对象转jq对象
-
jQuery对象转换原生JS对象
-
- 方法一 : 根据下标取元素，取出即为原生对象 var div = $(“div”)[0];
- 方法二 : 使用jQuery的get(index)取原生对象var div2 = $(“div”).get(0);
$("#tip")[0]; //jq对象转dom对象
jQuery获取元素
jQuery通过选择器获取元素，$(“选择器”) 选择器分类 :
基础选择器
标签选择器： $(“div”)
ID 选择器： $(“#d1”)
类选择器： $(“.c1”)
群组选择器： $(“body,p,h1”)
console.log($("#tip").attr("id")); // tip
层级选择器
后代选择器： $(“div .c1”)
子代选择器： $(“div>span”)
相邻兄弟选择器： $(“h1+p”) 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $(“h1~h2”) 匹配选择器1后所有满足选择器2的兄弟元素
过滤选择器 需要结合其他选择器使用
:first 匹配第一个元素 例:$(“p:first”)
:last 匹配最后一个元素 例:$(“p:last”)
:odd 匹配奇数下标对应的元素
:even 匹配偶数下标对应的元素
:eq(index) 匹配指定下标的元素
:lt(index) 匹配下标小于index的元素
:gt(index) 匹配下标大于index的元素
:not(选择器) 否定筛选,除()中选择器外,其他元素
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>刘八</li>
<li>牛九</li>
</ul>
$("li:eq(2)").css("font-size","30px");
$("li:first,li:last").css("color","red");
$("li:odd").css("background-color","red");
$("li:even").css("background-color","#ccc");
属性选择器 属性选择器以[ ]为标志
[attrName] 匹配包含指定属性的元素
[attrName=value]/[attrName=”value”] 匹配属性名=属性值的元素
[attrName^=value] 匹配属性值以指定字符开头的元素
[attrName$=value] 匹配属性值以指定字符结尾的元素
[attrName*=value] 匹配属性值包含指定字符的元素
子元素过滤选择器
:first-child 第一个子元素
:last-child 匹配最后一个子元素
:nth-child(n) 匹配第n个子元素(n从1开始计数)
操作元素内容
.html() 设置或读取标签内容,等价于原生innerHTML,可识别标签语法
.text() 设置或读取标签内容,等价于innerText,不能识别标签
.val() 设置或读取表单元素的值,等价于原生value属性
.css()
// 创建一个div元素 var $div = $("<div></div>"); // 为div元素设置id值和内容以及央视 $div.attr("id", "child").html("我是一个动态元素").css("color", "red"); $("#parent").append($div); // 把创建的div内容添加在#parent后面
操作标签属性
attr(“attrName”,”value”) 设置或读取标签属性
prop(“attrName”,”value”) 设置或读取标签属性 注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
<input type="checkbox" name="marry1" checked id="marry1">婚否 //获取jq对象 console.log($("#marry").attr("checked")); // checked console.log($("#marry").prop("checked")); // true <input type="checkbox" name="marry2" id="marry2">婚否 //获取jq对象 console.log($("#marry").attr("checked")); // undefined console.log($("#marry").prop("checked")); // false
removeAttr(“attrName”) 移除指定属性
操作标签样式
1、为元素添加id/class属性，对应选择器样式
2、针对类选择器，提供操作class属性值的方法
addClass(“className”) 添加指定的类名
removeClass(“className”) 移除指定的类型,如果参数省略,表示清空class属性值
toggleClass(“className”) 结合用户行为，实现动态切换类名。如果当前元素存在指定类名,则移除;不存在则添加
<style> .red { background-color: red; color: #fff; } </style> <script> // 如果#tip的样式class是red，则移除，如果不是，则添加。 $("#tip").on("click", function () { console.log("ok"); $("#tip").toggleClass("red"); }); </script>
3、操作行内样式
css("属性名","属性值") //设置行内样式
css(JSON对象) //设置一组CSS样式
/*
JSON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
*/
根据层级结构获取元素
.parent() 返回父元素
.parents(‘selector’) 返回满足选择器的祖先元素
.children()/children(“selector”) 返回所有直接子元素/返回满足选择器的直接子元素
.find(“selector”) 返回所有的后代元素(包含直接与间接)
.next()/next(“selector”) 返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器
.prev()/prev(“selector”) 返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器
//获取#mid上一个兄弟元素的text() $("#mid").prev().text()
.siblings()/siblings(“selector”) 返回所有的兄弟元素/满足选择器的所有兄弟元素
// 获取#mid下一个兄弟元素的text $("#mid").next().text()
元素的创建,添加,删除
创建 使用$(“标签语法”)，返回创建好的元素
var div = $("<div></div>"); //创建元素 div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性 var h1 = $("<h1 id='d1'>一级标题</h1>"); //创建的同时设置内容，属性和样式
添加至页面
1）作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj $obj.prepend(newObj); //作为第一个子元素添加至$obj中
2）作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素 $obj.before(newObj); //在$obj的前面添加兄弟元素
3）移除元素
$obj.remove(); //移除$obj
动画
显示和隐藏 show(2000,callback)/hide(2000,callback)
下拉和上推 slideDown(time,function)/slideUp(time,function)
$("#btn").on("click",function(){
if($("#btn").text()=="隐藏")
{
$("ul").slideUp(2000,function(){
$("#btn").text("显示")
});
}
else{
$("ul").slideDown(2000,function(){
$("#btn").text("隐藏")
});
}
})
淡隐淡现方式显示 fadeOut()/fadeIn()
$("#btn").on("click", function () {
if ($(this).text() == "隐藏") {
$("#img").fadeOut(2000, function () {
$("#btn").text("显示");
})
} else {
$("#img").fadeIn(2000, function () {
$("#btn").text("隐藏");
})
}
});
实现自定义动画 .animate
$("#move").on("click", function () {
$("#ball").fadeIn(2000);
$("#ball").animate({
left: "200px"
});
setTimeout(function () {
$("#ball").animate({
top: "10px"
})
}, 100);
//超时200ms后调用函数
setTimeout(function () {
$("#ball").animate({
left: "100px"
})
}, 200);
setTimeout(function () {
$("#ball").animate({
top: "100px"
})
}, 300);
setTimeout(function () {
$("#ball").fadeOut(2000)
}, 301)
});
jQuery事件处理
1、文档加载完毕
JS 方法：window.onload
jQuery:
//语法一 $(document).ready(function (){ //文档加载完毕后执行 }) //语法二 $().ready(function (){ //文档加载完毕后执行 }) //语法三 $(function(){ //文档加载完毕后执行 })
区别： 原生onload事件不能重复书写，会产生覆盖问题(写了多个的话，只会执行最后一个)；jquery中对事件做了优化,可以重复书写ready方法，依次执行
// 只执行第二个
window.onload = function () { alert("原生页面加载完成") }; window.onload = function () { alert("原生页面加载完成2") };
// 依次执行 $(function () { alert("页面加载完成") }); $(function () { alert("页面加载完成2") });
2、事件绑定方式
事件名称省略 on 前缀
//on("事件名称"，function) $("div").on("click",function(){});//新版本使用的多些 //bind("事件名称",function) $("div").bind("click",function(){});//1.6-1.8间的版本 //事件名作为方法名 $("div").click(function(){});
3、this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。
遍历函数–each
选择器.each(function(index,element){
//index表示索引
//element表示元素})
<div>abc</div> <div>def</div> <div>ggg</div> $("div").each(function(index,elem){ console.log(index); console.log($(elem)); //转成jq对象 console.log($(elem).text()) //获取元素的内容 })
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159234.html
