一、基本语法
1.1
导入
导入后可以用英文输入法：$
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
二、选择器
2.1
根据匹配的类匹配元素：$(".select1")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" ></div>
<div class="select1"></div>
<div class="select1"></div>
<script type="text/javascript">
// 匹配所有的.select类
var eg = $(".select1")
console.log(eg)
</script>
</body>
</html>
2.2.
匹配第一个元素：$("div:first")
匹配最后个元素： $("div:last")
匹配所有索引值为偶数的元素，包括0：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" ></div>
<div class="select1"></div>
<div class="select2"></div>
<script type="text/javascript">
// 获取第一个元素
var eg = $("div:first")
console.log(eg)
// 获取最后一个元素
var eg1 = $("div:last")
console.log(eg1)
</script>
</body>
</html>
2.3
获取第一个元素：$("div:first")
获取最后一个元素：$("div:last")
匹配所有偶数的元素：$("div:even")
匹配所有奇数的元素：$("div:odd")
匹配一个给的索引值的元素：$("div:eq(2)")
匹配所有大于给定索引值的元素：$("div:gt(3)")
匹配所有小于给定索引值的元素：$("div:lt(3)")
匹配如 h1, h2, h3之类的标题元素,并给所有标题添加上颜色：$(":header").css("background","#00FF0000")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<script type="text/javascript">
// 获取第一个元素
var eg = $("div:first")
console.log(eg)
// 获取最后一个元素
var eg1 = $("div:last")
console.log(eg1)
// 匹配所有偶数的元素
var eg2 = $("div:even")
console.log(eg2)
// 匹配所有奇数的元素
var eg3 = $("div:odd")
console.log(eg3)
// 匹配一个给的索引值的元素
var eg4 = $("div:eq(2)")
console.log(eg4)
// 匹配所有大于给定索引值的元素
var eg5 = $("div:gt(3)")
console.log(eg5)
// 匹配所有小于给定索引值的元素
var eg6 = $("div:lt(3)")
console.log(eg6)
// 匹配如 h1, h2, h3之类的标题元素,并给所有标题添加上颜色
var eg7 = $(":header").css("background","#00FF0000")
console.log(eg7)
</script>
</body>
</html>
三、属性
3.1
设置或返回被选元素的属性值：attr
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" >深圳</div>
<div id="box" >下大雨了</div>
<div class="box" >把</div>
<div class="box" >sheshe冲走了</div>
<div class="box" >真惨</div>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<script type="text/javascript">
// 返回被选元素的返回值
console.log($("div").attr("class"))
// 设置属性名称和属性值
$("div").attr("id","container")
console.log($("div").attr("id"))
// 回调函数，把id的属性值给到title
$("div").attr("title",function(){return this.id})
console.log($("div").attr("title"))
// 删除id属性
$("div").removeAttr("id")
// attr支持任意属性
$('#container').attr("title",'这是真的')
$('#container').attr("sleep",'10m')
// prop只支持内置属性
$('#container').prop("title",'这是真的')
$('#container').prop("sleep",'10m')
</script>
</body>
</html>
3.2
为每个匹配的元素添加指定的类名：addClass()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<script type="text/javascript">
// 给h1标签添加一个类属性one
$("h1").addClass("one")
// 删除h1的类属性
$("h1").removeClass("one")
</script>
</body>
</html>
3.3
取得第一个匹配元素的html内容：html()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<script type="text/javascript">
// 获取h1标签的html内容
console.log($("h1").html())
// 设置所有h2元素的html内容
console.log($("h2").html("Hello <b>world</b>!"))
</script>
</body>
</html>
3.4
取得所有匹配元素的内容：text()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<script type="text/javascript">
// 匹配所有div元素的内容
console.log($("div").text())
// 匹配所有div并设置内容
$("div").text("hello world")
</script>
</body>
</html>
3.5
获得匹配元素的当前值：val()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<input type="text" value="请输入">
<script type="text/javascript">
// 匹配元素当前值，后面添加的不会影响
console.log($("div").val())
// 匹配文本框当前值
console.log($("input").val())
// 设定文本框的值
$("input").val("hello world")
</script>
</body>
</html>
四、文档处理
4.1
向每个匹配的元素内部追加内容：append()
把所有匹配的元素追加到另一个指定的元素元素集合中：appendto()
向每个匹配的元素内部前置内容：prepend()
把所有匹配的元素前置到另一个、指定的元素元素集合中：prependTo()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" >卡死了</div>
<script type="text/javascript">
var h1 = "<h1>静态</h1>"
var h2 = "<h2>变态</h2>"
var h3 = "<h3>失态</h3>"
// 添加标签
$("#container").append(h1)
// $("#container").appendTo(h2)
// $("#container").prepend(h3)
// $("#container").prependTo(h4)
</script>
</body>
</html>
匹配所有该元素，将其插入当前元素前面：insertAfter()
匹配所有该元素，将其插入当前元素后面：insertBefore()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>i lie</p>
<div id="foo" >my</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 把#foo移动到p标签前面
// $("p").insertAfter("#foo")
// 把p标签移动到#foo后面
$("#foo").insertBefore("p")
</script>
</body>
</html>
五、css
5.1
访问匹配元素的样式属性：.css()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="select" >0</div>
<div class="select1">1</div>
<div class="select2">2</div>
<div class="select3">3</div>
<div class="select4">4</div>
<div class="select5">5</div>
<h1>6</h1>
<h2>7</h2>
<h3>8</h3>
<h4>9</h4>
<h5>10</h5>
<p>我</p>
<p>你</p>
<p>他</p>
<input type="text" value="请输入">
<script type="text/javascript">
//获取第一个p元素的css属性的值
console.log($("p").css("color"))
// 给所有p元素设置字体颜色个背景颜色
// 注意：添加大括号，键不用引号
$("p").css({color:"gray",background:"blue"})
</script>
</body>
</html>
六、事件
6.1
事件：on
on后可接鼠标事件、键盘事件、html事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<img src="../day06/images3/small_4.jpg" id="one" >
<img src="../day06/images3/small_10.jpg" id="two" >
<img src="../day06/images3/small_8.jpg" id="three" >
<hr >
<img src="../day06/images3/big_4.jpg" id="show" >
<script type="text/javascript">
// 给img添加点击事件
$("img").on("click",function(){
// 获取img最后一个元素，将src设置成tihs.src
$("img").last().attr("src",this.src)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#out {
width: 167px;
height: 30px;
border: 1px solid #00BFFF;
}
td{
width: 50px;
height: 50px;
border: 1px solid #00BFFF;
text-align: center;
color: white;
box-sizing: border-box;
background: lightslategray;
}
.select{
width: 50px;
height: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td class="select" >1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<div id="out">1月份好</div>
</table>
<script type="text/javascript">
$("td").click(function(){
$("td").removeClass("select")
$(this).addClass("select");
console.log('点了')
$("#out").html($("td").index(this) +1+"月份好")
})
</script>
</body>
</html>
七、动画
7.1
沿y轴向上缩减：slideUp()
沿y轴向下展开：slideDown()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缩小</title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#container{
width: 300px;
height: 300px;
background: linear-gradient(to right,red ,blue);
}
</style>
</head>
<body>
<div id="container" ></div>
<button id="clear" >点击</button>
<script type="text/javascript">
// 点击按钮将container收起来
$("#clear").click(function(){
$("#container").slideUp(5000,function(){
alert("完了")
})
})
// 江container展开
$("#clear").click(function(){
$("#container").slideDown(5000,function(){
alert("完了")
})
})
</script>
</body>
</html>
7.2
沿x，y轴等比缩小：toggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xy等比缩小并逐渐消失</title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#container{
width: 300px;
height: 300px;
background: linear-gradient(to right,red ,blue);
}
</style>
</head>
<body>
<div id="container" ></div>
<button id="clear" >点击</button>
<script type="text/javascript">
// 将container沿xy轴等比缩小
$("#clear").click(function(){
$("#container").toggle(5000,function(){
alert("完了")
})
})
</script>
</body>
</html>
7.3
动画：animate({属性})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞行的小块</title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 设置边框 */
#container {
width: 400px;
height: 400px;
position: relative;
border: 1px solid #00BFFF;
}
/* 设置飞行方块属性 */
#box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border: 1px solid red;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<button id="clear">点击</button>
<script type="text/javascript">
// 添加点击事件
$("#clear").click(function(){
$("#box").animate({
// 向右飞300个像素
left:"300px",
// 回调函数
},2000,function(){
$("#box").animate({
// 向下飞300个像素
top:"300px",
// 回调函数
},2000,function(){
$("#box").animate({
// 向左飞300个像素
left:"0px",
// 回调函数
},2000,function(){
$("#box").animate({
// 向上飞300个像素
top:"0px"
},2000)
})
})
})
})
</script>
</body>
</html>
八、Ajax
8.1
网络请求工具：Ajax
获取对象：getJSON()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="dianji" >点击</button>
<ul id="movie_list" ></ul>
<script type="text/javascript">
$("#dianji").click(function(){
// 获取对象
$.getJSON("img/movie_list.json",function(img){
// 查看是否获取了
console.log(img)
// 获取data数组
var movies = img.data
console.log(movies)
// 遍历数组
for (var i = 0;i<movies.length;i++){
// 获取movies中的第i个给到movie
var movie = movies[i]
// 创建li标签
var $li = $("<li></li>")
// 在li中写入数组中的第i个数据
$li.html(movie.title)
// 将li添加到ul中
$("#movie_list").append($li)
}
})
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
