/* 选取第一个元素 first*/ (′li:first′).css(′background′,′red′)/∗选取最后个元素last∗/('li:first').css('background','red') /* 选取最后个元素 last*/ (′li:first′).css(′background′,′red′)/∗选取最后个元素last∗/('li:last').css('background','red') /* 排除指定元素之外的所有元素 / (′li:not(".fei")′).css(′background′,′red′)/∗选取索引是偶数的所有元素index从0开始0也是偶数even∗/('li:not(".fei")').css('background','red') / 选取索引是偶数的所有元素index从0开始0也是偶数 even*/ (′li:not(".fei")′).css(′background′,′red′)/∗选取索引是偶数的所有元素index从0开始0也是偶数even∗/('li:even').css('background','red') /* 选取索引是奇数的所有元素index从0开始 odd*/ $('li:odd').css('background','red')
/* 选取'索引索引索引'等于index的元素index从0开始：eq（index） */
$('li:eq(3)').css('background','red')
/* 选取索引大于index的所有元素index从0开始 gt(index)*/
$('li:gt(1)').css('background','red')
/* 选取索引小于index的所有元素index从0开始 lt(index)*/
$('li:lt(1)').css('background','red')
/* 选取所有标题元素 如h1-h6 :header 有冒号*/
$(':header').css('background','red')
/* 获取当前获得焦点的元素 :focus*/
$('input').click(function(){
$(':focus').css('background','red')
})
/* 选取所有可见元素 :visble*/
复制代码
//(′div:visble′)/∗选取所有不可见元素:hidden∗///('div:visble') /* 选取所有不可见元素 :hidden / //(′div:visble′)/∗选取所有不可见元素:hidden∗///('div:hidden') // (′div′).hide()/∗这样就隐藏了，只是隐藏没有删除∗///('div').hide()/ 这样就隐藏了，只是隐藏没有删除 / // (′div′).hide()/∗这样就隐藏了，只是隐藏没有删除∗///('div').show()/ 这样就显示了 */ // $('button').click(function(){
// if( $('div').css('display')=='block'){
// $('div').hide('slow')/* 'slow'慢速fast快速 3000就是三秒，这个具体的数字不要加引号 */
// }else{
// $('div').show('slow')
// }
// })
复制代码
/* 关灯 */ let count=1; $('button').click(function(){
if(count==1){
$('div').css('background','red');
$('div').show(1000);
count++;
return;
}
if(count==2){
$('div').css('background','yellow');
count++;
return;
}
if(count==3){
$('div').hide(1000);
count==1;
}
})
/* html和text的区别 */
/* html用于获取第一个匹配元素的HTML内容或者文本内容 */
let h=$('#div').html();
console.log(h);
/* text会把div集合内的文字都获取 */
let h=$('#div').text();
console.log(h);
复制代码
/* 设置所有匹配元素的HTML内容或者文本。html可以获取标签，text不可以 */
/* html()可以对HTML代码进行操作，类似于JS中的innerHTML */
/* innerHTML和html()设置是都会把原来的替换 */
$('#div1').html('我是一名放假的学生')
$('#div1').text('我是一名放假的学生<br>')/* text是不能识别标签的 */
/* 鼠标移动到div上显示样式 */
// $('div').mouseover(function(){
/* $(this).addClass('divClass') */
/* toggleClass鼠标移入，如果没有样式就添加样式 */
//$(this).toggleClass('divClass big')
// })
/* 鼠标离开div时样式消失 */
// $('div').mouseout(function(){
/* $(this).removeClass('divClass') */
/*也是toggleClass 鼠标移入，如果有样式就删除样式 */
//$(this).toggleClass('divClass big')
// })
/* hasClass()方法来判断是否包含指定的样式 */
function toggleFn(/* that */){
/* 现在显示的是用封装的方式，传了一个参数that的方法这时函数内的this记得改成that ,同时可以使用继承的方法，这样就不用传参了*/
if($(this).hasClass('divClass big')){
$(this).removeClass('divClass big')
}else{
$(this).addClass('divClass big')
}
}
$('div').mouseover(function(){
/* if($('div').hasClass('divClass big')){
$(this).removeClass('divClass big')
}else{
$(this).addClass('divClass big')
} */
toggleFn.call(this)
})
$('div').mouseout(function(){
/* if($('div').hasClass('divClass')){
$(this).removeClass('divClass big')
}else{
$(this).addClass('divClass big')
} */
toggleFn.apply(this)
})
/* parent() 获取父元素*/
// $('.yu').parent()
// /* parents() 获取元素所有的祖先元素*/
// $('.yu').parents()
/* filter()过滤，在集合元素中过滤出指定的元素 */
/* each()规定为每个匹配元素规定运行的函数 */
/* each回调函数里面的第一个参数i是索引，第二个参数e是原生元素 */
// $('li').each(function(i,e){
// console.log(i);
// })
$('h1').click(function(){
$('li').each(function(i,e){
$(e).text('祝福冬奥${i}')
})
})
/* 用于获取位于匹配元素前面和后面的'所有所有所有'同辈元素 siblings() 除了他自己*/
// let ls=$('.yu').siblings()
$('li').click(function () {
$(this).css('background', 'red').siblings().css('background', '');
})/* 点击有背景，其他无背景 */
// /* 用于获取紧临匹配元素之后的元素next() */
// /* 有多个.yu的话就会返回一个紧临匹配元素之后的元素集合 */
// let d=$('.yu').next();
// /*用于获取紧临匹配元素之前的元素prev() */
// let d=$('.yu').prev();
// /* children()方法可以用来获取元素中所有元素 */
// let lis = $('ul').children('.tt')/* 这样就单独获取到了class为tt的 */
// let c = $('.box').children('ul')
// /* 而find可以获取后代的元素 */
// $('.box').children('li')
复制代码
/* prop是获取元素自身的属性 attr是获取元素的自定义属性 */ $('#lan').click(function(){
checkFn.call(this,'我爱篮球',$('h1'))
复制代码
}) $('#zu').click(function(){
checkFn.call(this,'我爱足球',$('h1'))
复制代码
}) function checkFn(aihao,obj){ if($(this).prop('checked')){ obj.append(aihao); } else{ let t= obj.text(); let n=t.replace(aihao,''); obj.text(n)
}
复制代码
}
$('p').attr('data-a')/* 获取属性 */
$('p').attr('data-b','wwwwwwww')/* 设置属性 */
/* 设置图片属性 */
$('img').attr('width','10px')
/* 删除图片属性 */
$('img').click(function(){
$(this).removeAttr('width')/* 这样点击时就删除了设置的宽度 */
})
// /*remove()删除整个节点,是可以自己删除自己的 */
// $('button').click(function(){
// $('li:eq(0)').remove();
// })
/* empty清空节点内容,并没有删除节点 */
// $('button').click(function(){
// $('li:eq(0)').empty();
// })
/* detach()删除整个节点，保留元素绑定事件，附加的数据 */
// $('li:eq(0)').click(function(){
// alert('你好')
// })
// $('button').click(function(){
// $('li:eq(0)').detach();
// })
/* 替换节点replaceWith() */
$('button').click(function(){
let h=$('<h1>wwwww</h1>')
/* 用h1来替换第一个li */
// $('li:eq(0)').replaceWith(h)
/* 同样也是替换 */
// h1.replaceAll($('li:eq(0)'))
/* clone是复制,true复制事件处理，false反之。false或者不传参数都不能复制事件处理 */
let cloneLi=$('li:eq(0)').clone(true);
$('ul').append(cloneLi)
})
