一． Jquery是什么？
a) Jquery是一个JavaScript库，也叫做DOM库，它封装一堆JavaScript函数，方便我们操作dom节点。
b) 好处：提高开发效率。
二． 使用jquery的步骤：
a) 引入jquery
b) 查找节点
i. 通过id选择器
ii. 元素选择器
iii. Class选择器
iv. 后代选择器
c) 为节点绑定事件
i. on函数来为节点绑定事件
ii. 单个元素对象和类数组对象都不需要for循环，直接绑定事件
d) 改变节点的属性、内容
i. 获取和设置元素属性：attr
1. Attr（属性名称）：attr中只有一个参数时，代表获取元素属性。
2. Attr(属性名称，属性值):attr中有两个参数，代表为元素设置属性。
ii. 获取和设置css属性：
1. Css（样式名称）：后去样式值
2. Css（{“样式名称”:“样式值”}）：设置样式值
iii. 获取和设置元素内容：
1. Html():没有参数，代表获取内容
2. Html(“哈哈哈”):一个参数，代表设置内容
iv. 给元素添加动画
1. Animate
//简单动画,(selector).animate({styles},speed,easing,callback)
$(
"#start").
on(
"click",
function(){
$(
"#box").
animate({
"left"
:
"500px"},
'slow')
.
animate({
"top"
:
"500px"},
'slow').
animate({
"left"
:
"100px"},
'slow')
.
animate({
"top"
:
"0px"},
'slow');
});
e) 对节点进行增删改查
三． Jquery中的ajax：
a) ajax是什么?
i. 浏览器与服务端进行数据交互的对象。
b) Jquery中ajax？
i. Jquery中对象原生ajax进行封装，封装了以下函数：
1. $.get：发送get请求
2. $.post:发送post请求
3. $.ajax:可配置的ajax函数，支持get请求、post请求、jsonp等等。
案例：获取豆瓣数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="header">头部</div>
<div class="nav">导航部分</div>
<div class="wrap">
<h2 id="title" class="title">正在热映</h2>
<div id="movie-box" class="movie-box">
</div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/ajax.js"></script>
</body>
</html>*{margin:0;padding:0;list-style: none;}
a{
text-decoration: none;
}
button{
outline: none;
border: 0 none;
}
.header{
background: #545652;
height: 28px;
color: #fff;
}
.nav{
background: #f0f3f5;
height: 115px;
margin-bottom: 40px;
}
.wrap{
width: 1040px;
margin:0 auto;
background: moccasin;
min-height: 900px;
}
.title{
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
color: #111;
padding-bottom: 10px;
border-bottom: 1px solid #eaeaea;
margin-bottom: 18px;
}
.movie-box dl{
float: left;
width: 115px;
height: 250px;
margin-right: 25px;
}
.movie-box dt{
width: 115px;
height: 161px;
margin-bottom: 17px;
}
.movie-box dt img{
width: 100%;
height: 100%;
display: block;
}
.movie-box dd{
width: 115px;
height: 22px;
line-height: 22px;
text-align: center;
}
.movie-box dd a{
color: #333;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.movie-box dd button{
display: block;
margin: 10px auto 0;
text-align: center;
width: 90px;
height: 24px;
line-height: 24px;
background-color: #268dcd;
color: #fff;
border-radius: 2px;
}
var url = 'https://api.douban.com/v2/movie/in_theaters';
$.ajax({
url:url,
type:'GET',
dataType: 'JSONP',
success: function (json) {
$("#title").html(json.title);
var str = '';
for (var i = 0; i < 5; i++) {
str += '<dl>'
+ '<dt>'
+ '<img src="' + json.subjects[i].images.medium + '" />'
+ '</dt>'
+ '<dd>'
+ '<a href="' + json.subjects[i].alt + '">' + json.subjects[i].title + '</a>'
+ '<button>选座购票</button>'
+ '</dd>'
+ '</dl>';
}
$("#movie-box").html(str);
}
});四、jQuery常用方法
1、eq() --jQuery 遍历方法
eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
案例：选取第二个 <p> 元素（索引号为 1）：
$("p").eq(1).css("background-color","yellow");
2、on()-- jQuery 事件方法
$(selector).on(event,childSelector,data,function)
| function | 可选。规定当事件发生时运行的函数。 |
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
案例：向 <p> 元素添加 click 事件处理程序：
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
p
"
)
.
on
(
"
click
"
,
function
(
)
{
alert
(
"
段落被点击了。
"
)
;
}
)
;
}
)
;
3、each()---jQuery 遍历方法
$(selector).each(function(index,element))
each() 方法为每个匹配元素规定要运行的函数
案例：输出每个 <li> 元素的文本：
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
li
"
)
.
each
(
function
(
)
{
alert
(
$
(
this
)
.
text
(
)
)
}
)
;
}
)
;
4、off()-- jQuery 事件方法
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
案例：移除所有 <p> 元素上的 click 事件：
$("button").click(function(){
$("p").off("click");
});
$("p").off("click");
});
5、val()-- jQuery HTML/CSS 方法
val() 方法返回或设置被选元素的 value 属性。
案例：设置 <input> 字段的值：
$
(
"
button
"
)
.
click
(
function
(
)
{
$
(
"
input:text
"
)
.
val
(
"
Glenn Quagmire
"
)
;
}
)
;
五、jquery基础练习
1、选项卡
(1)jquery版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv = "X-UA-Compatible" content = "IE=7" > -->
<title>jquery版本一二选项卡</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none;}
#btn-list{
height: 30px;
width: 306px;
}
#btn-list li{
float: left;
width: 100px;
height: 30px;
background: skyblue;
border: 1px solid #eee;
}
#btn-list .active-btn{
background: blue;
}
#box-list {
width: 306px;
height: 300px;
position: relative;
}
#box-list .active-box{
display: block;
}
#box-list li{
width: 306px;
height: 300px;
background: yellow;
display: none;
}
</style>
</head>
<body>
<ul id="btn-list">
<li class="active-btn">按钮一</li>
<li>按钮二</li>
<li>按钮三</li>
</ul>
<ul id="box-list">
<li class="active-box">我是第一个盒子</li>
<li>我是第二个盒子</li>
<li>我是第三个盒子</li>
</ul>
<script src="../js/jquery.js"></script>
<!-- jquery版本 -->
<script>
//版本一二步骤
//1、为活动的元素设置选择器，给活动元素设置内联样式，
//并给选择器设置所需样式
//2、引入jquery
//3、查找节点，为节点绑定事件
//4、改变节点的属性内容
//第一个版本选项卡
// $("#btn-list li").on("click",function(){
//在点击之前先清空其他li的样式
// $("#btn-list li").attr("class","");
// $("#box-list li").attr("class","");
//再对活动的元素设置属性和内容
// $(this).attr("class","active-btn");
// $("#box-list li").eq($(this).index()).attr("class","active-box");
// });
// 第二个版本选项卡
$("#btn-list li").on("click",function(){
//对这两个元素的值遍历进行清空
$("#btn-list li,#box-list li").each(function(){
$(this).attr("class","");
console.log($(this));//每一个li
});
$(this).attr("class","active-btn");
console.log($(this));//当前点击的li
$("#box-list li").eq($(this).index()).attr("class","active-box");
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv = "X-UA-Compatible" content = "IE=7" > -->
<title>jq选项卡Myjquery版本</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none;}
#btn-list{
height: 30px;
width: 306px;
}
#btn-list li{
float: left;
width: 100px;
height: 30px;
background: skyblue;
border: 1px solid #eee;
}
#box-list {
width: 306px;
height: 300px;
position: relative;
}
#box-list li{
width: 306px;
height: 300px;
background: yellow;
display: none;
}
</style>
</head>
<body>
<ul id="btn-list">
<li class="btn" style="background:blue;">按钮一</li>
<li class="btn" >按钮二</li>
<li class="btn" >按钮三</li>
</ul>
<ul id="box-list">
<li class="box" style="display:block;">我是第一个盒子</li>
<li class="box" >我是第二个盒子</li>
<li class="box" >我是第三个盒子</li>
</ul>
<script src="../js/MyJquery2.js"></script>
<script>
$(".btn").on("click",function(){
$(".btn").attr("style","");
$(".box").attr("style","");
$(this).attr("style","background:blue");
$(".box").eq($(this).index()).attr("style","display:block");
});// $("#btn-list li").on("click",function(){
// $(this).css( {"background":"yellow"} ).siblings().css({"background":""});
// $("#box-list li").eq( $(this).index() ).css({"display":"block"}).siblings().css({"display":"none"});
// }) </script>
</body>
</html>（2）js版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js版本选项卡</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.btn-list {
width: 408px;
height: 30px;
}
.btn-list li {
width: 100px;
height: 30px;
border: 1px solid pink;
background: skyblue;
float: left;
}
.box-list {
width: 408px;
height: 200px;
background: silver;
}
.box-list li {
width: 408px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<ul id="btn-list" class="btn-list">
<li style="background:pink;">美食</li>
<li>娱乐</li>
<li>住宿</li>
<li>景点</li>
</ul>
<ul id="box-list" class="box-list">
<li style="display:block;">美食</li>
<li>娱乐</li>
<li>住宿</li>
<li>景点</li>
</ul>
<script>
var oBtn = document.querySelectorAll("#btn-list li");
console.log(oBtn);
var oBox = document.querySelectorAll("#box-list li");
console.log(oBox);
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].index=i;
oBtn[i].onclick = function () {
for (var j = 0; j < oBtn.length; j++) {
oBtn[j].style.background = '';
oBox[j].style.display='none';
}
this.style.background = 'pink';
oBox[this.index].style.display='block';
}
}
// var oBtnList=document.getElementById("btn-list");
// var oBtn=oBtnList.getElementsByTagName("li");
// var oBoxList=document.getElementById("box-list");
// var oBox=oBoxList.getElementsByTagName("li");
// for(var i=0;i<oBtn.length;i++){
// oBtn[i].index=i;
// // console.log( oBtn[i].index);
// oBtn[i].οnclick=function(){
// for(var j=0;j<oBtn.length;j++){
// //在点击按钮之前去掉按钮所有的背景色
// oBtn[j].style.background='';
// console.log(oBtn[j]);
// oBox[j].style.display='none';
// }
// //鼠标点击的按钮有背景色
// this.style.background='pink';
// oBox[this.index].style.display='block';
// }
// }
</script>
</body>
</html>2、图片切换
<!DOCTYPE html>
<html laImgng="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js jq版图片切换</title>
<style>
*{margin:0;padding:0;list-style: none;}
.box{width: 400px;height: 300px;margin-bottom: 20px;}
.slider{width: 400px;height: 100px;}
.slider li{ width: 76px;height: 76px; float: left; padding:10px;border: 2px solid #eee; }
img{width: 100%;height: 100%;}
</style>
</head>
<body>
<div class="box">
<img id="box" src="images/pic1.jpg" alt="">
</div>
<ul id="slider" class="slider">
<li><img src="images/pic1.jpg" alt=""></li>
<li><img src="images/pic2.jpg" alt=""></li>
<li><img src="images/pic3.jpg" alt=""></li>
<li><img src="images/pic4.jpg" alt=""></li>
</ul>
<script src="../js/jquery.js"></script>
<script>
//js版本
// var oBox=document.getElementById("box");
// var oImg=document.querySelectorAll("#slider img");
// console.log(oImg);
// for(var i=0;i<oImg.length;i++){
// oImg[i].οnclick=function(){
// oBox.src=this.src;
// }
// }
//jq版本
$("#slider img").on("click",function(){
var oSrc=$(this).attr("src");
console.log(oSrc);
$("#box").attr("src", oSrc);
});
</script>
</body>
</html>3、网页换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页换肤</title>
<link id="link1" href="css/css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<dl id="message">
<form>
<dt>
<strong>可以换肤的提交框：</strong>
<input id="btn1" type="button" value="皮肤1" />
<input id="btn2" type="button" value="皮肤2" />
</dt>
<dd>输入姓名：
<input class="text" type="text" />
</dd>
<dd>输入密码：
<input class="text" type="password" />
</dd>
<dd>请您留言：
<textarea></textarea>
</dd>
<dd class="center">
<input class="btn" type="submit" value="提交" />
</dd>
</form>
</dl>
<script src="js/jquery.js"></script>
<script>
// js版本
// var oBtn1=document.querySelector("#btn1");
// var oBtn2=document.querySelector("#btn2");
// var oLink=document.querySelector("#link1");
// 1、获取DOM节点
// var OBtn1=document.getElementById("btn1");
// var oBtn2=document.getElementById("btn2");
// var oLink=document.getElementById("link1");
// 2.为DOM节点绑定html事件
// OBtn1.οnclick=function(){
// 3.操作DOM属性
//设置节点属性值：节点对象.属性名称 = 新属性值
// oLink.href='css/css1.css';
// }
// oBtn2.οnclick=function(){
// oLink.href='css/css2.css';
// }
// jq版本
$("#btn1").on("click",function(){
$("#link1").attr("href","css/css1.css");
});
$("#btn2").on("click",function(){
$("#link1").attr("href","css/css2.css");
});
</script>
</body>
</html>4、焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>焦点事件</title>
</head>
<body>
<input id="input" type="text" value="请输入你要搜索的关键词">
<script src="js/jquery.js"></script>
<script>
// js版本
// var oInput=document.getElementById("input");
// oInput.οnfοcus=function(){
// this.value='';
// console.log(oInput.value);
// }
// oInput.οnblur=function(){
// this.value='请输入你要搜索的关键字';
// console.log(oInput.value);
// }
//jq版本
$("#input").on("focus",function(){
$(this).attr("value","");
});
$("#input").on("blur",function(){
$(this).attr("value","请输入你要搜索的关键字");});//$("#input").on("focus",function(){
// $(this).val('');
// });
// $("#input").on("blur",function(){
// $(this).val('请输入你要搜索的关键词');
// });
</script>
</body>
</html>5、渲染后台数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>渲染后台数据</title>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>小毛</td>
<td>32</td>
<td>男</td>
</tr>
</tbody>
</table>
<script>
//操作节点的内容：
//innerHTML:直接替换节点里原有的内容
//1.字符窜模板：当字符窜中有html元素，
//将字符窜插入到真实父节点中，字符窜中的元素就会变成真实的节点。
var list = [
{ name: "小明", age: 18, sex: '男' },
{ name: "小芳", age: 12, sex: '女' },
{ name: "小刚", age: 20, sex: '男' },
{ name: "小羊", age: 16, sex: '女' }
];
var oTbody = document.getElementById("list");
var str = '';
//通过字符串拼接
for (var i = 0; i < list.length; i++) {
str += '<tr><td>' + list[i].name + '</td><td>' + list[i].age + '</td><td>' + list[i].sex + '</td></tr>';
}
console.log(str);
oTbody.innerHTML = str; // $("#list").append(str);
</script>
</body>
</html>
扫一扫
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
