JQuery就是封装了js的常用代码 用起来更加简洁方便
使用jQuery前可去官网下载载入js文件
编写第一个jq代码
$(document).ready(function (){
console.log("Hellw,jQuery!")
})
ready方法与js中的onload事件类似 不过还是有区别的 js的onload事件是在等待页面所有的内容加载完毕后再执行的 而ready方法呢是在DOM文档结构绘制完毕后执行的 无需等待与DOM关联的元素（图片。。。）
jq的语法结构
$(选择器).方法();
这里的 相当于 j Q u e r y 而 相当于jQuery 而 相当于jQuery而()的作用是将DOM对象转换为jQuery对象
jQuery选择器
基础选择器
<!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>
</head>
<script src="/js文件/jquery-3.7.1.min.js" type="text/javascript"></script>
<body><div class="bbs"><header><span onclick="add()">我要发帖</span></header><section id="main"></section><div class="post" style="display: none;"><input class="title" placeholder="请输入标题（1-50个字符）">所属版块：<select id="mySelect"><option>请选择版块</option><option>Python交流专区</option><option>Java交流专区</option><option>Web交流专区</option></select><textarea class="content"></textarea></div></div><span class="a">老六</span><input class="btn" value="发布" onclick="updatename()"><input class="btn" value="关闭" onclick="closing()">
</body>
<script>function updatename(){//class选择器$(".a").html("六六六");//id选择器$("#a").html("六六六");//标签选择器$("p").html("六六六");//获取所有元素选择器$("*").html("六六六");//并集选择器$(".a,p,#a").html("六六六");}function closing(){var type="";$("option").each(function (){type+=$(this).val()+" "})$(".bbs").html(type);}</script>
</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>
</head>
<script src="/js文件/jquery-3.7.1.min.js" type="text/javascript"></script>
<style>input:focus{background-color: blueviolet;}button:focus{background-color: rgb(24, 180, 89);}@keyframes move {from { transform: translateX(0); }to { transform: translateX(100px); }
}
.iii:animated{background-color:aqua;
}#id3 {animation: move 1s infinite alternate; /* 应用动画效果 */
}
</style>
<body><h1>h1</h1><p>p</p><h2>h2</h2><div><ul id="id1" style="width: 100px;"><li>1</li><ul><li>2<span>4</span></li></ul></ul><ul id="id2"><li>5</li></ul><ul id="id3"><li>5</li><li>5</li><li>5</li><li>5</li></ul><button>点击获得焦点</button><button class="iii">改变动画</button></div><input type="text">
</body>
<script>//div 下的所有ul 后代选择器 console.log($("div ul").css("border", "1px solid blue"));//div下的ul子级标签 子选择器 与后代选择器的区别就是 后代选择器会选择符合他条件的标签 哪怕孙选择器 而子选择器只会选择他的子级console.log($("div>ul").css("border", "1px solid red"));//兄弟选择器 匹配li的兄弟ul的所有ul元素console.log($("li~ul").css("color", "green"));//相邻选择器 匹配ul的邻居ulconsole.log($("ul+ul").css("color", "red"));//基础过滤选择器//选取到第一个ul元素console.log($("ul:first").css("border", "1px solid green"));//选取到最后一个ul元素console.log($("ul:last").css("border", "1px solid pink"));//匹配除了id1的ul标签$("ul:not(#id1)").css("border", "1px solid black");//获取索引是偶数的ul元素$("ul:even").css("border", "1px solid purple");//获取索引是偶数的ll元素$("li:odd").css("color", "purple");//选取给定的索引 从0开始$("li:eq(0)").css("color", "yellow")//选取索引大于0的li$("li:gt(0)").css("color", "pink")//选取索引小于1的li $("li:lt(1)").css("color", "black")//选取标题元素$(":header").css("color","brown")//给获得焦点的元素 提高与用户交互$("input:focus").css("background-color","deeppink")//选取动画元素$(":animated").css("background-color","deeppink")</script></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></head>
<body><div id="cont1"><dl><dt><img src="./images/list1.jpg" alt="" /></dt><dd><b id="b">￥9</b><span>亨氏120g乐维滋(苹果草莓)(1岁+)</span></dd></dl><dl><dt><img src="./images/list2.jpg" alt="" /></dt><dd><b id="b1">￥107</b><span>嘉宝Gerber 豌豆营养米粉225g</span></dd></dl><dl><dt><img src="./images/list3.jpg" alt="" /></dt><dd><b>￥29</b><span>北田 米饼100g 香蕉牛奶口味</span></dd></dl><dl><dt><img src="./images/list4.jpg" alt="" /></dt><dd><b>￥19.9</b><span>贝莱康Balic全棉安心内裤(3条装)</span></dd></dl></div>
</body>
<script src="/js文件/jquery-3.7.1.min.js"></script>
<script>//选取b标签有id的$("b[id]").css("color", "pink");//选取b标签id为b的$("b[id=b]").css("color", "red");//选取b标签id不为b的$("b[id!=b]").css("color", "red");//选取b标签id值属性开头为b的标签$("b[id^=b]").css("color", "yellow")//选取b标签id值属性结尾为b的标签$("b[id$=b]").css("color", "brown")//选取b标签id值属性带有为b的标签$("b[id*=b]").css("color", "green")
</script>
</html>
解决jQuery和其他库的冲突
如果在其他库之前导入jq库 符号的使用权不在 j q 但是可以使用 J q u e r y （）方法代替 符号的使用权不在jq 但是可以使用Jquery（）方法代替 符号的使用权不在jq但是可以使用Jquery（）方法代替
在其他库之后导入JQuery库
1.使用jQuery.nooConflict()将控制权移交给别的库
2.用别的字符（变量）接收jQuery.nooConflict()的引用 自定义一个新的字符
上面的方法都不推荐使用！
上面两种风格虽然解决了冲突问题 但是改变了jQuer的编码风格 从而对已有的JQuery代码重用带来的影响
1.
jQuery.nooConflict(); //放弃$的使用权 给别的脚本使用
jQuery(document).ready(function($){
//在此代码块中可使用$
})
jQuery.nooConflict(); //放弃$的使用权 给别的脚本使用
(function($){
//在此代码块中可使用$
}
)(jQuery)
可使用这两个方式
)
里面的字符串)