$(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的属性与样式之切换样式.toggleClass()
jQuery的属性与样式之样式操作.css()