?jQuery库下载地址：https://www.jquery.com
? ? ? ?最新版本下载： https://jquery.com/download/? ? ? ?历史主要版本下载： https://code.jquery.com/? ? ? ?所有版本下载： https://code.jquery.com/jquery/
jQuery 是 JavaScript 函数库、类库！
jQuery===$?
页面加载函数
js原生代码
? ? ?window.onload = function(){}
jQuery
? ? $(document).ready(function(){})简化为$(function())
选择器函数
?1、基础选择器：
? ?1）、id选择器
????????????$("#id值")：选择页面中唯一的一个标签
? ?2）、class选择器
????????????$(".class值")：选择页面中所有class属性值相同的标签
? ?3）、标签选择器
????????????$("标签名称")：选择页面中所有指定名称的标签
?2、子类选择器
?3、后代选择器
?4、群组选择器
?5、伪类选择器
?6、属性选择器
?7、表单元素选择器
? ? ? ? ? ? ?包含所有的表单属性
jQueryAPI库地址：https://jquery.cuishifeng.cn/index.html
<script>
$(function() {
// 1、id选择器
// $("#id值")：选择页面中唯一的一个标签
$("#btn1").click( function() {
$("#container").css("border", "solid 2px red")
})
// 2、class选择器
// $(".class值")：选择页面中所有class属性值相同的标签
$("#btn2").click(function() {
$(".h3").css("border-bottom", "solid 1px red")
})
// 3、标签选择器
// $("标签名称")：选择页面中所有指定名称的标签
$("#btn3").click(function() {
$("p").css({
"background-color": "#069",
"color": "white"
})
})
// 4、子类选择器
$("#btn4").click(function() {
$("#ul-box > li").css({"color": "red"})
})
// 5、后代选择器
$("#btn5").click(function() {
$("#ul-box li").css({"border-right": "red 5px solid"})
})
// 6、群组选择器
$("#btn6").click(function(){
$("p,span,i").css({
"font-size": "22px",
"color": "blue"
})
} )
// 7、伪类选择器
$("#btn7").click(function() {
$("#ul-box li:even").css({
"color": "red",
"font-size": "24px"
})
})
// 8、属性选择器
$("#btn8").click(function() {
$("div[id='box']").css({
"border": "solid 5px orange"
})
})
// 9、表单元素选择器
$("#btn9").click(function() {
// :input表示选择所有的表单元素标签，不仅仅是input标签
// 同时包含select、textarea、button等等
$(":input").css({
"border": "solid 2px red"
})
})
})
</script>其效果展示如下：
?遍历函数
遍历父节点:
? ? ? jq.parent() 获取直接父节点
? ? ? jq.parents() 获取先辈节点遍历子节点：? ??? ??jq.children([st]) 获取直接子节点
? ? jq.find([st]) 获取后代节点? ? jq.eq(index) ：获取第几个节点? ? jq.first() 获取第一个节点? ? jq.last() 获取最后一个节点遍历兄弟节点：? ??? ? jq. prev ()获取上一个兄弟标签? ??? ? jq. prevAll ()获取前面所有兄弟标签?? ? jq. next ()获取下一个兄弟标签??? ? ? ? ? ?jq. nextAll ()? ? ? ? ? ?jq. siblings ()
?操作属性
获取闭合标签的内容：
? ? ?var?txt?=?$("#shopcart?>?h3").html()
? ? ?var?txt?=?$("#shopcart?>?h3").text()
?修改闭合标签的内容：
? ? ??$("#shopcart?>?h3").text("OFFCN的购物车")
表单元素
? ? 获取
? ? ? ? ? ?var?count?=?$("#shopcart?input").val()
? ? 设置
? ? ? ? ? ??$("#shopcart?input").val(10)
HTML代码
<button id="btn1">内容|闭合标签|点击修改购物车名称</button> <button id="btn2">内容|表单|点击修改购物数量</button> <button id="btn3">属性|选择复选框</button> <button id="btn4">样式|高亮购买数量</button> <hr> <div id="shopcart"> <h3>我的购物车</h3> <input type="checkbox" name="item" id="item"> <label for="count">购买数量</label> <input type="text" name="count" id="count" value="1"> </div>jQuery
$(function() { $("#btn1").click(function() { // 获取闭合标签的内容 // var txt = $("#shopcart > h3").html() var txt = $("#shopcart > h3").text() console.log("原来内容：", txt) // 修改闭合标签的内容 $("#shopcart > h3").text("OFFCN的购物车") }) $("#btn2").click(function() { // 获取表单元素的内容 var count = $("#shopcart input").val() console.log("原有购买数量：", count) // 设置表单元素的内容 $("#shopcart input").val(10) }) $("#btn3").click(function() { // 操作复选框属性 // $("#item").attr("checked", true) // attribute属性 $("#item").prop("checked", true) // property 属性 })
效果图如下所示：
按钮点击前：
按钮点击后 ：
?
?
?