属性选择器
<input type="text" value="123">
<input type="text" value="456">
<input type="text" >
<script>
$('input[value]').css('background', 'red');//有value属性的会被选中
$('input[value=123]').css('background', 'red');//value值等于123的会被选中
</script>
<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">
<script>
$('input[value^=123]').css('background', 'red');//选中以123开头的
$('input[value$=555]').css('background', 'red');//选中以555结尾的
$('input[value*=3]').css('background', 'red');//选中包含3的
</script>
引号的问题
<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//当属性的值有空格的 不加引号会报错，其他可以不加引号
$('div[class="box box1"]').css('background', 'red');
</script>
链式调用
获取值之后不能再有链式调用
<body>
<div>bbbbb</div>
<script>
// var $div = $('div');
// $div.html('bbbb');
// $div.css('background', 'red');
// $div.click(function(){
// alert('111');
// })
//获取值之后不能再有链式调用
$('div').css('background', 'red').html('aaaa').click(function(){
alert(111);
})
</script>
增加删除class
- addClass() 增加
removeClass() 删除
toggleClass() 交替删除增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.4.js"></script>
<style>
div{
height: 100px;
width: 100px;
}
.border{
border: 1px solid #111;
}
.bg-light{
background: yellow;
}
.bg-dark{
background: #ddd;
}
</style>
</head>
<body>
<div class="border bg-dark"></div>
<script>
//添加class
// $('div').addClass('border bg-light');
//删除class
// $('div').removeClass('bg-dark border');
//交替删除或增加
$('div').click(function(){
$(this).toggleClass('border');
})
</script>
</body>
</html>
show() hide()
var onOff=true;
$('button').click(function(){
if(onOff){
$('div').hide();//在内部改变display
}else{
$('div').show();
}
onOff=!onOff;
})
兄弟元素的选择
next();下一个兄弟元素；可以有多个参照，选择多个兄弟元素；
prev();上一个兄弟元素；可以有多个参照，选择多个兄弟元素；
nextAll() 当前元素下面所有的兄弟元素；可以有多个参照，选择多个兄弟元素；
prevAll() 当前元素上面所有的兄弟元素；可以有多个参照，选择多个兄弟元素；
siblings(); 当前元素所有的兄弟元素；可以有多个参照，选择多个兄弟元素；
参数的筛选功能
$('.item').siblings('.test').css('background','blue');//传入参数，筛选同时满足条件的对象
下标选择：.eq();
slice选择
$('li').slice(1,3).css('background', 'red');//截取中间下标1~下标2
children
<body>
<ul>
<li>01</li>
<li>02</li>
<li class="selected">03</li>
<li>04</li>
<li>05</li>
</ul>
<script>
$('ul').children('.selected').css( 'background', 'red');
//选择ul子元素中class为.selectec 的元素
</script>
</body>
find()
$('.box').find('.inner').html('bbbbb');//查找子元素
parent
$('a').parent().css('background', 'red');//查找父元素
closest
closest必须有参数；从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
<body>
<div class="box">
<div class="box">cccc
<div>bbbb
<div id="div1">aaaa</div>
</div>
</div>
</div>
<script>
//closest必须有参数；从自身开始，查找最新满足条件的父元素；
$('#div1').closest('.box').css('background', 'red');
</script>
</body>
抽奖练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src=../jquery/jq190.js></script>
<style>
*{
margin:0;
padding:0;
}
ul{
margin-top:50px;
list-style: none;
width:300px;
text-align: center;
line-height: 98px;
}
ul>li{
width:98px;
height:98px;
border: 1px solid #ccc;
float: left;
}
button{
margin-top:350px;
border: 1px solid #ccc;
}
.active{
background:red;
}
</style>
</head>
<body>
<ul>
<li class="active">一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
<li>四等奖</li>
<li>五等奖</li>
<li>六等奖</li>
<li>七等奖</li>
<li>八等奖</li>
<li>九等奖</li>
</ul>
<button>开始抽奖</button>
<script>
$('button').click(function(){
var result=parseInt(1+Math.random()*9)
var steps=result+9;
var iNow=0;
var timer=setInterval(
function(){
$('li').removeClass('active').eq(iNow%9).addClass('active');
iNow++;
if(iNow===steps){
clearInterval(timer);
alert('恭喜获得'+result+'等奖')
}
}
,200)
})
</script>
</body>
</html>
创建节点
//原生的方式
var oDiv = document.createElement('div');
//jq的方式
var $div = $('<div>hai</div>') //可以直接添加内容
append()方法 添加子元素//插入到子元素最后面
prepend()方法 添加子元素//插入到子元素最前面
before() after() 插入到当前元素前/后；
append方法，添加子元素//插入到子元素最后
- 参数：1. jq对象
- 标签字符串
- 原生的dom对象
<script>
var div = document.createElement('div');
div.innerHTML = 'aaa';
div.setAttribute('id', 'div1');
div.style.background = 'red';
// document.body.appendChild( div );
//$还可以创建节点
var $div1= $('<div></div>');//jq对象
$div1.css('background', 'red');
$div1.html('aaa');
var $div = $('<div style="background: red">aaa</div>');
// $('body').append( $div );
// $('body').append( '<div style="background: red">aaa</div>' );
$('body').append(div);
//append方法，添加子元素
//参数: 1. jq对象
// 2. 标签、字符串
// 3. 原生的dom对象
</script>
删除节点
.remove();删除操作会将元素上的事件也删除
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
<script>
var $li = $('li').eq(1).click(function(){ alert(11) }).remove();
//删除操作会将元素上的事件也删除
$('ul').append( $li );
</script>
</body>
index();
<script>
//表示所选元素在兄弟元素中排行第几 //包括其他标签元素在内的所有兄弟元素
// alert( $('.item').index() );
//第二种用法:
alert( $('#span1').index('span') )
//#span在所有span中排的位置
</script>
选项卡的代码
<body>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$('input').click(function(){
var index = $(this).index('input');
var $div = $('#div1 div');
$div.hide().eq(index).show();
});
</script>
</body>
jq中的循环 each();
函数中：
i 第一个参数代表下标
elem 第二个参数代表每个原生dom对象
this指向：this==elem
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//回调函数中的第一个参数 索引值
// $('li').each(function(i, elem){
// $(elem).html( i+1+5 );
// });
//continue跳出本次循环
//break跳出整个循环
// for(var i=0;i<9;i++){
// if( i===2 ){
// continue;
// }
// console.log(i);
// }
//在each中 return是跳出本次循环
//return false 跳出整个循环
$('li').each(function(i, elem){
if(i===2){
return false;
}
$(elem).html( i+1+5 );
});
</script>
</body>
退出循环
在for循环中我们是用break来退出整个循环
在.each() 中 return false来退出整个循环//return 退出本次循环
jq与js的转换
get() 获取原生都dom对象
$('div').get(0).innerHTML = 'sdfsdf';
与eq的区别
get方法得到的是原生dom对象， eq得到的是jquery对象
$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');
网友评论