Jquery基本操作

来源：互联网发布：怎么给淘宝宝贝配图编辑：程序博客网时间：2024/05/29 14:35

基本选择器：

#id选择器：

$("#test").val()选取所有id为test的元素

.class选择器：

$(".test").val()选取class为test的元素

element选择器（遍历html元素）

将P元素的文字大小设置为12px

$(document).ready(function(){

$('p').css('font-size','12px')

})

*选择器（遍历所有元素）

遍历from下的所有元素，并将字体颜色设置为红色

$('from *').css('color','#FF0000');

并列选择器

将P元素和DIV元素的margin设置为0

$(document).ready(function(){

$('p,div').css('margin','0')

})

或者：

$(document).ready(function(){

$('#.nihao').hover(function(){

$(this).addClass("")

},function(){

$(this).removeClass("")

});

层次选择器：

-------parent>child(直系子元素)

$(document).ready(function(){

$('div>span').css('color','#FF0000');选取div下的第一代span元素，并将字体改变为red

});

举例：

如上所述，在下面的代码中，只有第一个span会变红色，第二个span因为不属于div的第一代span子元素，所以color不变

<div>

<p>

</p>

</div>

-------prev+next(下一个兄弟元素，等同于next()方法)

$(document).ready(function(){

$('.item+div').css('color','#FF0000')选取class为item的下一个div兄弟元素

等价于:

$('.item').next('div').css('color','#FF0000');

})

举例：

下面代码中，只有123和789以及000会变色

-------prev~siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function(){

$('.inside~div').css('color','#FF0000'); 选取class为inside之后的所有div兄弟元素

等价于：

$('.inside').nextAll('div').css('color','#FF0000');

})

列：下面代码中G2和G4会变色

过滤选择器:

1>.基本过滤选择器

1-1>.:first和:last (取第一个元素或最后一个元素)

$(document).ready(function(){

$('span:first').css('color','#FF0000');

$('span:last').css('color','#FF0000');

})

列：下面代码中G1（first元素）&G3（last元素）会变色

1.2>. :not (取非元素)

$(document).ready(function(){

$('div:not(.wrap)').css('color','#FF0000');

});

列：下面代码，G1会变色

但是：

<div>

</div>

当G1所在的div 和G2所在的div是父子关系时，G1和G2都会变色

1.3>. :even 和:odd(取偶数索引或奇数索引元素是，索引从0开始，even表示偶数，odd表示奇数)

$(document).ready(function(){

$('tr:even').css('background','#EEE');偶数行颜色

$('tr:odd').css('background','#DADADA');奇数行颜色

});

列：A,C行颜色：#EEE（第一行索引为0），B，D行颜色为#DADADA

<tbody>

<tr>

</tr>

</tbody>

<table>

1.4>. :eq(x)(取制定索引的元素)

列：更改第三行的背景色

$(document).ready(function(){

$("tr:eq(2)").css('background','#FF0000');

})

1.5>. :gt(x) 和 :lt(x)(去大于X索引或小于X索引的元素)

列：L4和L5是红色的，L1和L2是蓝色的，L3是默认颜色

$(document)`.ready(function(){

$("ul li:gt(2)").css("color","#FF0000");

$("ul li:lt(2)").css("color","#0000FF");

});

<ul>

</ul>

1.6>. :header (取H1~H6标题元素)

列：

$(document).ready(function(){

$(":header").css("background","#EFEFEF")

});

下面代码中，H1~H6的背景色都会变

2>.内容过滤选择器:

2.1>. :contains(text)(选取包含text文本的元素)

$(document).ready(function(){

$("dd:contains('jQuery')").css("color","#FF0000") dd元素中包含jQuery的文本会变色

});

列：下面的代码中，第一个dd会变色

<dl>

<dd>jQuery,.NET.CLR</dd>

</dl>

2.2>. :empty (选取不包含子元素或文本为空的元素)

$(document).ready(function(){

$('dd:empty').html('没有内容')；

})

上面那个列子中第三个dd会显示“没有内容”文本

2.3>.:has(selector)(取选择器匹配的元素)

$(document).ready(function(){

$("div:has(span)").css('border','1px solid #000');

})

为包含span元素的div添加边框，即使span不是div的直系子元素，也会生效

<div>

<h2>

</h2>

</div>

2.4>. :parent(去包含子元素或文本的元素)

$(document).ready(function(){

$('ol li:parent').css('border','1px solid #000');

});

下面代码中，A和D所在的li会有边框

<ol>

</ol>

hide()用法：

瞬间隐藏：

$("#ids").hide();

给隐藏时间,在2000毫秒（2秒）内隐藏

$("#ids").hide(2000)

隐藏完成后执行回调函数：

$("#ids").hide(2000,function(){

alert("我隐藏好了")

});

one用法：

用于创建一次性事件，一旦这个事件执行一次之后，就会被自动删除

$("#ids").one("click",function(){

alert("我是一次性事件");

})

click点击事件改变div css属性

$("#buttons").click(function(){

$("divs").css("color","green")

})

节点：

创建并追加节点：

var $var_1 =$("<li title ='title'>香蕉</li>");创建一个节点

$("ui").append($var_1)将var_1节点插入到htmltype2节点中

删除节点：

remove() 删除该元素$("ul li:eq[1]").remove(); 获取UL中的第二个li并删除

empty() 清空节点，包括后代节点$("ul li").remove("li[title='菠萝']") 删除ul中li中元素属性title = "菠萝"的元素

阅读全文

0 0