jQuery入门（二）--- jQuery语法
接上文------ jQuery入门（二）— jQuery初体验（与原生js对比）
引入jQuery：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
1、设置、获取文本内容 text（）
1.1 获取文本
<!--结构-->
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1">我是一个div标签
<p>我是一个p标签
<span>span1</span>
</p>
</div>
<div id="div2">我是一个div标签
<p>我是一个p标签
<span>span2</span>
</p>
</div>
<script>
$(function(){
// text(); 获取和设置文本
//1、获取文本：text（）; 方法不给参数
$('#getBtn').click(function(){
//1.1 获取id为div1这个标签的文本
//会获取到这个标签中所有的文本，包括后代元素的文本
console.log($('#div1').text());
//1.2、获取标签为div的元素的文本
//包含多个dom元素的jQuery对象，通过text（）方法获取文本，会把所有dom元素的文本获取到
console.log($('div').text());
})
//2、设置文本：text（）方法给参数，参数就是要设置的文本
$('#setBtn').click(function(){
//2.1 给id为div1的标签设置文本
//会覆盖他原来的内容,如果设置的文本中包含标签，是不会把这个标签解析出来的
$('#div1').text('我是新设置的文本');
//2.2 给标签为div的元素设置文本
//包含了多个dom元素的jQuery对象，通过text（）的方法设置文本，会把所有的dom元素都设置上
$('div').text('设置的文本'); //隐式迭代
})
})
2、 获取、设置样式 .css（）
引入jquery：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#div1 {
height: 200px;
background-color: pink;
border:2px solid red;
}
</style>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1" style="width:200px"></div>
<div id="div2" style="width:300px"></div>
<div id="div3" style="width:400px"></div>
<script>
$(function(){
// .css（）方法：设置、获取样式
//1、获取样式： .css（）方法设置参数为要获取的值的样式名
$('#getBtn').click(function(){
//1.1 获取id为div1这个元素的样式
console.log($('#div1').css('width')); //200px
console.log($('#div1').css('height')); //200px
console.log($('#div1').css('background-color')); //rgb(255, 192, 203)
//再ie浏览器中，要获取边框这样的样式值，要给一个准确的边框，如border-top-width
console.log($('#div1').css('border')); //2px solid rgb(255, 0, 0)
console.log($('#div1').css('border-top-width')); //2px
//1.2 获取标签为div的元素们的样式
// 获取包含多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式
console.log($('div').css('width')); //200px
})
//2、设置样式: .css() 方法要给样式名和样式值，用''包起来
// 设置样式设置的是行内样式
$('#setBtn').click(function(){
//2.1 给id为div1的元素设置样式
$('#div1').css('width','300px');
$('#div1').css('height',300);
$('#div1').css('background-color','red');
$('#div1').css('border','10px solid green');
//设置多样式
$('#div1').css({
width: 300,
'height': '300px',
'background-color': 'red',
'border':'10px solid green'
});
//2.2 给标签为div的元素们设置样式
$('div').css({
width: 300,
'height': '300px',
'background-color': 'red',
'border':'10px solid green'
})
//隐式迭代，给每一个div都设置了同样的样式
})
})
</script>
</body>
3、基本选择器
3.1 选择器：
一组方便获取页面中元素的方法，jQuery选择器返回的是jQuery对象。
jQuery特性：隐式迭代；链式编程：在于一个方法返回的是一个jQuery对象，既然是jQuery对象，就可以继续点出jQuery的方法
3.2 基本选择器 ：
id选择器 $('#id')
类选择器 $('.class')
标签选择器 $('div')
并集选择器 $('div,p,li')
交集选择器 $('div.redClass')
3.3 层级选择器：
子代选择器 $('ul>li')
后代选择器 $('ul li')
3.4 过滤选择器：
:eq( index ) $('li:eq(2)').css('color','red) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $('li:odd').css('color','red') 获取到的li元素中，选择索引号为奇数的元素
:even $('li:even').css('color','red') 获取到的li元素中，选择索引号为偶数的元素
3.5 筛选选择器：
children(selector) $('ul').children('li') 相当于$('ul>li'),子类选择器
find(selector) $('ul').find('li') 相当于$('ul li'),后代选择器
siblings(selector) $('#first').sublings('li') 查找兄弟节点，不包括自己本身
parent（） $('#first').parent( ) 查找父亲
eq（index） $('li').eq(2) 相当于$('li:eq(2)') ，索引号index从0开始
next( ) $('li').next( ) 找下一个兄弟
nextAll( ) $('li').nextAll( ) 找后面所有兄弟
prev( ) $('li').prev( ) 找上一个兄弟
prevAll( ) $('li').prevAll( ) 找前面所有兄弟
3.6 高亮显示例子
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
background: #000;
}
.wrap{
margin:100px auto 0;
width: 630px;
height: 420px;
padding:10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap ul{
width: 630px;
height: 394px;
list-style: none;
}
.wrap li{
float:left;
padding-right:10px;
padding-bottom:10px;
}
.wrap img{
display: block;
border: 0;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="1.jpg" ></a></li>
<li><a href="#"><img src="2.jpg" ></a></li>
<li><a href="#"><img src="3.jpg" ></a></li>
<li><a href="#"><img src="4.jpeg"></a></li>
<li><a href="#"><img src="5.jpg" ></a></li>
<li><a href="#"><img src="6.jpg" ></a></li>
</ul>
</div>
<script>
$(function(){
//1、给小人物所在的li标签设置鼠标移入事件：当前透明度为1，其他兄弟li标签透明度为0.4
$('.wrap').find('li').mouseenter(function(){
$(this).css('opacity',1).siblings('li').css('opacity',0.4);
});
//2、鼠标移开大盒子，所有的li标签的透明度改为1
$('.wrap').mouseleave(function(){
//$('.wrap').find('li').css('opacity',1);
$(this).find('li').css('opacity',1);
})
})
</script>
</body>
4、class类操作
添加类 $('#div').addClass（'类名'）
移除类 $('#div').removeClass('类名')
判断类 $('#div').hasClass('类名')
切换类 $('#div').toggleClass('类名')
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#div1{
width: 100px;
height: 100px;
background-color: pink;
}
.font-size20{
font-size:30px;
}
.color{
color:yellow;
}
</style>
<body>
<input type="button" value="添加类" id="addClass">
<input type="button" value="移除类" id="removeClass">
<input type="button" value="判断类" id="hasClass">
<input type="button" value="切换类" id="toggleClass">
<div id="div1"> div1</div>
<script>
$(function(){
//1、添加类 $('#div').addClass（'类名'）
$('#addClass').click(function(){
//1.1 给id为div1的元素添加一个类
//添加单个类
$('#div1').addClass('font-size20');
//添加多个类
$('#div1').addClass('font-size20 color');
})
//2、移除类 $('#div').removeClass('类名');
$('#removeClass').click(function(){
//2.1 给id为div1的元素移除移除类
//移除单个类
$('#div1').removeClass('font-size20');
//移除多个类
$('#div1').removeClass('font-size20，color');
//移除所有类
$('#div1').removeClass();
})
//3、判断类 $('#div').hasClass('类名')
$('#hasClass').click(function(){
//3.1 判断id为div1的元素是否有某个类，如有返回true，否则返回false
console.log($('#div1').hasClass('color')); //true
})
//4、切换类 $('#div').toggleClass('类名')
$('#toggleClass').click(function(){
//4.1 如果元素有某个类就移除这个类，如果元素没有某个类就添加这个类
$('#div1').toggleClass('color');
})
})
</script>
</body>
6998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
