jQuery语法，选择器，DOM操作

jQuery语法

$(this).hide()---隐藏当前元素

$("p").hide()---隐藏所有<p>元素

$(p.test).hide()---隐藏所有class="test"的<p>元素

$("#test").hide()---隐藏所有id="test"的元素

 

$(document).ready(function(){});==$(function(){});

jQuery选择器

基本选择器

//选择 id为 adc 的元素
$('#btn1').click(function(){
$("#adc").css("background","red")
})
//选择 class 为 sup 的所有元素.
$('#btn2').click(function(){
$(".sup").css("background","red")
})
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$("div").css("background","red")
})
//选择 所有的元素
$('#btn4').click(function(){
$("*").css("background","yellow")
})
//选择 所有的span元素和id为tank的元素
$('#btn5').click(function(){
$("span,#tank").css("background","yellow")

层次选择器 

<script type="text/javascript">
$(function() {
//选择 body内的所有div元素
$('#btn1').click(function() {
$("body div").css("background", "yellow")
})
//在body内,选择子元素是div的
$('#btn2').click(function(){
$("boby>div").css("background","red")
})
//选择 所有class为adc 的下一个div元素.
$('#btn3').click(function(){
$(".adc+div").css("background","yellow")
})
//选择 id为tank的元素 后面的所有div兄弟元素
$('#btn4').click(function(){
$("#tank~div").css("background","yellow")
})
})
</script>

基本过滤选择器

:first：选取第一个元素（单个元素）
:last：选取最后一个元素（单个元素）
:not(selector)：去除所有与给定选择器匹配的元素（元素集合）
:even：选取索引是偶数的所有元素，索引从0开始（元素集合）
:odd：选取索引是奇数的所有元素，索引从0开始（元素集合）
:eq（index）：选取索引等于index的元素（单个元素）
:gt(index)：选取索引大于index的元素（元素集合）
:lt(index)：选取索引小于index的元素（元素集合）
:header：选取所有的标题元素（元素集合）
:animated：选取当前正在执行动画的所有元素（元素集合）
:focus：选取当前获得焦点的元素（元素集合）

内容过滤器 

$(function(){
//选取含有文本“di”的div元素
$('#btn1').click(function() {
$("div:contains('di')").css("background", "yellow")
})
//选取不包含子元素(或者文本元素)的div空元素
$('#btn2').click(function() {
$("div:empty").css("background", "yellow")
})
//选取含有class为sup元素 的div元素
$('#btn3').click(function() {
$("div:has(.sup)").css("background", "yellow")
})
//选取含有子元素(或者文本元素)的div元素
$('#btn4').click(function() {
$("div:parrnt").css("background", "yellow")
})
})

属性选择器

//选取含有 属性title 的div元素
$('#btn1').click(function() {
$("div[title]").css("background", "yellow")
})
//选取 属性title值等于“top”的div元素
$('#btn2').click(function() {
$("[title=top]").css("background", "yellow")
})
//选取 属性title值不等于“top”的div元素(没有属性title的也将被选中)
$('#btn3').click(function() {
$("[title!=top]").css("background", "yellow")
})
//选取 属性title值 以“t”开始 的div元素.
$('#btn4').click(function() {
$("[title^=t]").css("background", "yellow")
})
//选取 属性title值 以“id”结束 的div元素
$('#btn5').click(function() {
$("[title $=id]").css("background", "yellow")
})
//选取 属性title值 含有“t”的div元素
$('#btn6').click(function() {
$("[title*=t]").css("background", "yellow")
})

子元素过滤器:nth-child(2)

$("ul li:first-chind")选取每个<ul>元素的第一个<li>元素

表单选择器 :select

表单对象属性过滤器:selected

 

 

$("ul li:first")选取第一个<ul>元素的第一个<li>元素

$("a[target='_blank']")选取所有target属性值等于"_blank"的<a>元素

$("a[target!='_blank']")选取所有target属性值不等于"_blank"的<a>元素

$(":button")选取所有type="button"的<input>元素和<button>元素

DOM操作

创建元素$("<li title='111'>阴阳师</li>")

插入节点$("h3").append("<b>我不喜欢玩游戏！</b>")

删除节点$("ol li").eq(1).remove();

复制节点$(this).clone(true).appendTo("ol")

替换节点$("h3").replaceWith("<b>我最讨厌哪个游戏？</b>")

包裹节点$("li").wrapAll("<b></b>")