jQuery笔记_js 选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色-CSDN博客

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

Dom对象和JQyery对象的转换：

选择器：

层级选择器：

选择器之基本筛选选择器：

：

例子：

//找到第一个div

$(".div:first").css("color", "#CD00CD");

//找到最后一个div

$(".div:last").css("color", "#CD00CD");

//:even 选择所引值为偶数的元素，从 0 开始计数

$(".div:even").css("border", "3px groove red");

//:odd 选择所引值为奇数的元素，从 0 开始计数

$(".div:odd").css("border", "3px groove blue");

//选择单个

$(".aaron:eq(2)").css("border", "3px groove blue");

//:gt 选择匹配集合中所有索引值大于给定index参数的元素

$(".aaron:gt(3)").css("border", "3px groove blue");

//:lt 选择匹配集合中所有索引值小于给定index参数的元素

//与:gt相反

$(".aaron:lt(2)").css("color", "#CD00CD");

//:not 选择所有元素去除不匹配给定的选择器的元素

//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$("input:not(:checked) + p").css("background-color", "#CD00CD");

jQuery选择器之内容筛选选择器

列子：

//查找所有class='div'中DOM元素中包含"contains"的元素节点

//并且设置颜色

$(".div:contains(':contains')").css("color", "#CD00CD");

//查找所有class='div'中DOM元素中包含"span"的元素节点

//并且设置颜色

$(".div:has(span)").css("color", "blue");

//选择所有包含子元素或者文本的a元素

//增加一个蓝色的边框

$("a:parent").css("border", "3px groove blue");

//找到a元素下面的所有空节点(没有子元素)

//增加一段文本与边框

$("a:empty").text(":empty").css("border", "3px groove red");

jQuery选择器之可见性筛选选择器

列子：

//查找id = div1的DOM元素,是否可见

show( $('#div1:visible') );

//查找id = div1的DOM元素,是否隐藏

show( $('#div1:hidden') );

jQuery选择器之属性筛选选择器

列子：

//查找所有div中，属性name=p1的div元素

$('div[name=p1]').css("border", "3px groove red");

//查找所有div中，有属性p2的div元素

$('div[p2]').css("border", "3px groove blue");

//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

$('div[name|="-"]').css("border", "3px groove #00FF00");

//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

$('div[name~="a"]').css("border", "3px groove #668B8B");

//查找所有div中，属性name的值是用imooc开头的

$('div[name^=imooc]').css("border", "3px groove red");

//查找所有div中，属性name的值是用imooc结尾的

$('div[name$=imooc]').css("border", "3px groove blue");

//查找所有div中，有属性name中的值包含一个test字符串的div元素

$('div[name*="test"]').css("border", "3px groove #00FF00");

//查找所有div中，有属性testattr中的值没有包含"true"的div

$('div[testattr!="true"]').css("border", "3px groove #668B8B");

jQuery选择器之子元素筛选选择器

列子：

//查找class="first-div"下的第一个a元素

//针对所有父级下的第一个

$('.first-div a:first-child').css("color", "#CD00CD");

//查找class="first-div"下的最后一个a元素

//针对所有父级下的最后一个

//如果只有一个元素的话，last也是第一个元素

$('.first-div a:last-child').css("color", "red");

//查找class="first-div"下的只有一个子元素的a元素

$('.first-div a:only-child').css("color", "blue");

//查找class="last-div"下的第二个a元素

$('.last-div a:nth-child(2)').css("color", "#CD00CD");

//查找class="last-div"下的倒数第二个a元素

$('.last-div a:nth-last-child(2)').css("color", "red");

jQuery选择器之表单元素选择器

列子：

//查找所有 input, textarea, select 和 button 元素

//:input 选择器基本上选择所有表单控件

$(':input').css("border", "1px groove red");

//匹配所有input元素中类型为text的input元素

$('input:text').css("background", "#A2CD5A");

//匹配所有input元素中类型为password的input元素

$('input:password').css("background", "yellow");

//匹配所有input元素中的单选按钮,并选中

$('input:radio').attr('checked','true');

//匹配所有input元素中的复选按钮,并选中

$('input:checkbox').attr('checked','true');

//匹配所有input元素中的提交的按钮,修改背景颜色

$('input:submit').css("background", "#C6E2FF");

//匹配所有input元素中的图像类型的元素,修改背景颜色

$('input:image').css("background", "#F4A460");

jQuery选择器之特殊选择器this

jQuery的属性与样式之.attr()与.removeAttr()添加属性和删除属性

列子：

//找到第一个input，通过attr设置属性value的值后面的.attr( attributeName, value )为值。

$("input:first").attr('value','.attr( attributeName, value )')

//找到第二个input，通过attr获取属性value的值

$("input:eq(1)").attr('value')

//找到第三个input，通过使用一个函数来设置属性

//可以根据该元素上的其它属性值返回最终所需的属性值

//例如，我们可以把新的值与现有的值联系在一起：

$("input:eq(2)").attr('value',function(i, val){

return '通过function设置' + val

})

//找到第四个input，通过使用removeAttr删除属性

$("input:eq(3)").removeAttr('value')

jQuery的属性与样式之html()及.text()

列子：

//显示出html方法获取到的内容

//.html()是整个html文档结构

$('p:first').text( $(".first-div").html() )

//显示出text方法获取到的内容

//.text()是文本内容的合集

$('p:last').text( $(".first-div").text() )

两者之间的区别：

//通过.text()方法替换文本内容

$(".left a:first").text('替换第一个a元素的内容')

//通过.html()方法替换html结构

$(".left div:first").html('整个div的子节点都被替换了')

//通过.text()的回调，获取原本的内容，修改，在重新赋值

$(".left a:first").text(function(idnex,text){

return '增加新的文本内容' + text

})

jQuery的属性与样式之.val()

jQuery的属性与样式之增加样式.addClass()在原有的class后面追加

jQuery的属性与样式之删除样式.removeClass()

列子：

//class=left下div元素删除newClass样式

$('.left div').removeClass('newClass')

//.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式

$('.right > div:first').removeClass(function(index,className){

//className = aa bb imoocClass

//把div的className赋给下一个兄弟元素div上作为它的class

$(this).next().addClass(className)

//删除自己本身的imoocClass

return 'imoocClass'

})

jQuery笔记