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的邻居ul
console.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)
可使用这两个方式