jquery是JS的一个框架
jquery兼容性非常好。
使用Jquery要下载 https://jquery.com/
jquery中文文档 http://jquery.cuishifeng.cn/
jQuery对象" $ "
基本语法：$(selector)action()
selector 选择器。
action() 动作，操作。
选择器,筛选器
它的语法结构和CSS 基本是一个的。
- 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<p>hello p </p>
<script>
// 基本选择器。
$("*").css("color","red").css("background","yellow") ;//所有字都变红,背诵变黄。
//选择DIV ("div") 选择ID（"#id名"）选择CLASS (".CLASS名1,class名2")
</script>
</body>
</html>
- 层级选择器：（组合选择器）
(.outer p) //class outer里面的所有p标签，后代
(.outer>p) //class outer里面的下一级标签，只子代
(.outer+ p) //class outer下面的毗邻标签，只选下面的。
- 筛选器：要么一个标签，要么是多个标签
<div class="div1">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script>
$(".div1 ul li:eq(2)").css("color","red") //拿 div1下的 ul下的li的第2个元素
$(".div1 ul li:lt(3)").css("color","red") //拿 div1下的 ul下的li下小于第个3元素
$(".div1 ul li:gt(2)").css("color","red") //拿 div1下的 ul下的li下大于第个2元素
</script>
- 属性选择器：
<div name="gf">
div gf
</div>
<script>
$("[name=gf]").css("color","red") //如果全页属性名只有一个可以直接用["属性名"]来拿，如果有多个可以这样拿
</script>
- 表单选择器：
<input type="button">
$(":button").css("width","200px") //可以简写
- 查找筛选器：
<div class="div">hello
<div class="div1">hello1
<div class="div11">hello 11</div>
<div class="div12">hello 12</div>
</div>
<div class="div2">hello 2 </div>
</div>
<script>
$(".div").children(".div1").css("color","red");//拿 div下的div1这个孩子 所有孩子都拿的话children("") 这样。只找儿子。
$(".div").find(".div1").css("color","red");//找所有后代。
$(".div1").next().css("color","red"); //只找下面的第一个
$(".div1").nextAll().css("color","red"); //找下面所有的
$(".div1").nextUntil(".div6").css("color","red"); //找div1下面一直到div6的标签
$(".div1").siblings().css("color","red") //上面，下面的兄弟都找到，不包括自己
</script>
实例一个简单的菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
</style>
</head>
<body>
<input type="button" onclick="show()" value="+" id="inp1">
<ul class="dianqi">电器
<li>电话</li>
<li>电视</li>
<li>电脑</li>
</ul>
<ul class="gongju">工具
<li>斧子</li>
<li>钳子</li>
</ul>
<ul class="shuji">书籍
<li>python</li>
<li>javascript</li>
<li>css</li>
<li>jquery</li>
</ul>
<script>
$(".dianqi").children().css("display","none");
$(".gongju").children().css("display","none");
$(".shuji").children().css("display","none");
function show() {
$(".dianqi").children().css("display","block");
var inp0=$("#inp1").val();
if (inp0=="+"){
$(".dianqi").children().css("display","block");
$("#inp1").val("-");
}
else {
$(".dianqi").children().css("display","none");
$("#inp1").val("+");
}
}
</script>
</body>
</html>
TAB菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
}
.menu{
width: 100%;
height: 30px;
background-color: #55b9f0;
}
.content{
width: 100%;
height: 300px;
background-color: #dff0c5;
padding-top: 5px;
}
.sub_menuAdd{
background-color: #4f6df0;
border-bottom: #f0214d 2px solid;
}
.sub_menu{
float: left;
text-align: center;
line-height:30px;
width: 80px;
height: 100%;
line-height:30px;
}
.hid{
display: none;
}
</style>
</head>
<body>
<div>
<div class="menu">
<div x="x1"class="sub_menu sub_menuAdd" onclick="tab(this)">菜单一</div>
<div x="x2"class="sub_menu" onclick="tab(this)">菜单二</div>
<div x="x3"class="sub_menu" onclick="tab(this)">菜单三</div>
</div>
<div class="content">
<div id="x1">内容一</div>
<div id="x2" class="hid">内容二</div>
<div id="x3" class="hid">内容三</div>
</div>
</div>
<script>
function tab(self) {
$(self).addClass("sub_menuAdd");
$(self).siblings().removeClass("sub_menuAdd");
var attr=$(self).attr("x"); // attr()是jquery的拿属性值的方法，JS用getAttribute()方法。attr("id","eee")这样是修改id 为eee
$("#"+attr).removeClass("hid").siblings().addClass("hid") //这里要注意下，不要老想着用show，会出问题，所以去掉hid就好了了~~~
}
</script>
</body>
</html>
**补充一个小知识点 **
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
循环
<script>
li=[10,20,30,40];
dic={name:"gf",age:"18"}; //字典也一样，拿到键和值，NB!!!!!!
$.each(li,function (i,x) {
//each 是jquery循环的关键字。li循环体，i 是索引， x 是索引对应的值
console.log("索引="+i,"值是="+x);
})
// ------------------循环方式二：
$("table tr").each(function () {
console.log($(this).html()); //拿到 table 下的所有tr标签下的 html内容 注意在this前面要加一个$
console.log($(this).text()); //拿里面的所有文本内容,text("555")里面加内容就可以进行修改
})
</script>
全先，取消，反选实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" id="id1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="id2">
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="id3" >
</td>
</tr>
<tr>
<td>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="取消" onclick="unSelect()">
<input type="button" value="反选" onclick="reverse()">
</td>
</tr>
</table>
<script>
function selectAll() {
// 注意：":checkbox"是一种简写，只有在表单里才可以这样用。prop() 和 attr()表示基本是一样的。
// 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
// 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
$("table :checkbox").prop("checked",true) ;
}
function unSelect() {
$("table :checkbox").prop("checked",false) ;
// $("table :checkbox").removeAttr("checked") ;
}
function reverse() {
$("table :checkbox").each(function () {
if ($(this).prop("checked")==true){ $(this).prop("checked",false);} //注意用这种方法进行循环时就可以直接使用 this 了
else {$(this).prop("checked",true)}
})
}
</script>
</body>
</html>
文档处理
- 复制标签实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
.css{
width: 25px;
height: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div class="inner">
<input type="button" value="+" onclick="func1(this)" class="css" >
<input type="text">
</div>
</div>
<script>
function func1(self) {
var Clone=$(self).parent().clone(); //clone 是克隆的意思，好像没有提示
Clone.children(":button").val("-").attr("onclick","func2(this)"); //children(":button") 这里要注意！！！！！attr("onclick",func2(this)，是给添加的新标签加一个onclick属性。改变原来的func1()
$("#div1").append(Clone); //注意得先拿到它的父亲
}
function func2(self){
//关于删除还有一个方法叫 empty()它的作用是清空，remove()的作用是删除整个标签。
$(self).parent().remove(); //先找到它的父亲，再删除
}
</script>
</body>
</html>
事件
<script src="jquery-3.4.1.min.js"></script>
<script>
//用下面的方法进行HTML树的全部加载，就不用写在后面了
$(document).ready(function () {
//内容
})
</script>
//------------------可以简写成这样：
$(function () {
//内容
})
- 在 jQuery中这样调用事件：
<script>
$("p").click(function () {
alert(123)
})
</script>
- 如果要动态的加内容，同时也要有上面一样的方法这样写 （事件委托）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="button" onclick="add()" value="++">
</body>
<script>
// 如果要动态的加内容，同时也要有上面一样的方法这样写：
function add() {
$("ul").append("<li>555</li>")
}
$("ul").on("click","li",function () {
alert("123") ;
})
</script>
</html>
动画效果
- 逐渐完成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<h3 style="display: none">hello world</h3>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id="toggle" type="button" value="toggle">
</body>
<script>
$("#show").click(function () {
$("h3").show(1000); //不加1000直接显示，加上1000意思是用1000毫秒来完成这个动作。
})
$("#hide").click(function () {
$("h3").hide(1000);
})
$("#toggle").click(function () {
$("h3").toggle(1000);
})
</script>
</html>
- 淡入淡出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #f0b06d;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>内容</div>
<input id="in" type="button" value="fadeIn">
<input id="out" type="button" value="fadeOut">
<input id="toggle" type="button" value="fadeToggle">
<input id="to" type="button" value="fadeTo">
<script src="jquery-3.4.1.min.js"></script>
<script>
$("#in").click(function () {
$("div").fadeIn(1000);
})
$("#out").click(function () {
$("div").fadeOut(1000);
})
$("#toggle").click(function () {
$("div").fadeToggle(1000);
})
$("#to").click(function () {
$("div").fadeTo(1000,0.3) //0.3是透明度
})
</script>
</body>
</html>
- 滑进滑出：
$("div").slideDown(1000);
$("div").slideUp(1000);
$("div").slideToggle(1000)
回调函数
$("div").fadeToggle(1000,function () {
//当 1秒种执行完成后，要执行的代码，也叫回调函数。
alert(111)
});
4664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
