02.Jquery语法上
一、jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
1、jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 选择器title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
$('#div1').css({color:'pink'});
$('.box').css({fontSize:'30px'});
$('.list li').css({background:'green',color:'#fff',fontSize:'20px'});
});
script>
<style type="text/css">
#div1{
color:red;
}
.box{
color:green;
}
.list li{
margin-bottom:10px;
}
style>
head>
<body>
<div id="div1">这是一个div元素div>
<div class="box">这是第二个div元素div>
<ul class="list">
<li>1li>
<li>2li>
ul>
body>
html>
2、对选择集进行修饰过滤(类似CSS伪类)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
3、对选择集进行函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
4、选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
// next() 同级的下一个元素，nextAll同级的下面所有的元素
// prev() 同级的上一个元素，prevAll同级的上面所有的元素
$('#div1').next().css({color:'pink'});
$('#div1').nextAll('p').css({color:'red'});
})
script>
head>
<body>
<div id="div1">这是一个div元素div>
<div>这是第二个div元素div>
<p>这是一个p元素p>
body>
html>
$('div').closest('form'); //选择离div最近的那个form父元素
//选择离最近的元素，元素可以是父级，可以是子集
$('#span02').closest('div').css({width:'200px',height:'200px',background:'pink'});
...
"div2">
"#" class="link1">腾讯网
"span02">span元素
...
$(‘div’).parent(); //选择div的父元素
$(function(){
//选择上一级的父元素
$('#span01').parent()
.css({width:'100px',height:'100px',background:'gold'});
})
...
"#">百度网
"span01">span元素
...
$(‘div’).children(); //选择div的所有子元素
// $('.list li')：不能回到父级
// $('.list').children()：可以通过end() 回到父级
$('.list').children().css({background:'gold',height:'30px',marginBottom:'10px'})
.end().css({background:'green'});
...
"list">
- 1
- 2
- 3
...
$(‘div’).siblings(); //选择div的同级元素(兄弟元素，除了自己)
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
...
"list2">
- 1
- 2
- 3
...
$(‘div’).find(‘.myClass’); //选择div内的class等于myClass的元素
$('#div2').find('.link1').css({color:'red'});
...
"div2">
"#" class="link1">腾讯网
"span02">span元素
...
二、jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
三、jquery属性操作
1、html() 取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('添加文字');
2、text() 取出或设置text内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('添加文字');
3、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').attr('src');
// 设置图片的地址和alt属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
4、
// 读写checkbox的状态用prop方法
// alert($('#check').prop('checked'));
$('#check').prop({checked:true});
三、绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
点击切换样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click 事件title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('.box').toggleClass('sty');
});
})
script>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
}
.sty{
background-color:green;
}
style>
head>
<body>
<input type="button" name="" value="切换" id="btn">
<div class="box">div>
body>
html>点击获取索引
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
$('.list li').click(function() {
//alert(this.innerHTML);
alert($(this).index());
});
})
script>
head>
<style type="text/css">
.list li{
height:30px;
margin-bottom:20px;
background-color: gold;
}
style>
<body>
<ul class="list">
<li>1li>
<li>2li>
<li>3li>
ul>
body>
html>
四、jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color: gold;
}
style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
//淡入淡出
$('.box').fadeToggle();
// 显示和隐藏
// $('.box').toggle();
//依次展开或卷起某个元素
// $('.box').slideToggle();
});
})
script>
head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box">div>
body>
html>五、jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 动画title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
/*
参数：
1、属性设置{param1: value1, param2: value2}
2、speed 时间 ms
3、swing 默认值 开始和结束慢速，中间快速 linear 匀速
4、回调函数
*/
//长和宽在1秒内变成200后，1秒内向右移动500，然后1秒内向下移动500
$('#div1').animate({width:200,height:200},1000,function(){
//alert('动画完了！');
$(this).animate({marginLeft:500},1000,function(){
$(this).animate({marginTop:500},1000);
});
});
})
script>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color: gold;
}
style>
head>
<body>
<div id="div1" class="box">div>
body>
html>六、jquery循环
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
//$('.list li').html('111');
//$('.list li').css({background:'gold'});
//总共执行了8次，分被为每一个li做赋值
$('.list li').each(function(index){
//index 是索引值
$(this).html(index);
})
})
script>
head>
<body>
<ul class="list">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>七、尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offse()
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos');
var pos =$pos.offset();
console.log(pos);//返回的是一个json,pos.left左边绝对距离。
var w = $pos.outerWidth();
var h = $pos.outerHeight();
$('.pop').css({left:pos.left+w,top:pos.top});
//鼠标移上去显示
$pos.mouseover(function(){
$('.pop').show();
})
$pos.mouseout(function(){
$('.pop').hide();
})
})
script>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:gold;
margin-bottom:10px;
}
.pos{
margin-left:500px;
}
.pop{
width:100px;
height:100px;
background-color:red;
position:fixed;
left:0;
top:0;
display:none;
}
style>
head>
<body>
<div class="box pos">div>
<div class="pop">
提示信息！
div>
body>
html>
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})