jquery過濾style

⑴ jquery濡備綍鍘繪帀div鐨剆tyle

闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆乭tml緙栬緫鍣ㄣ佹祻瑙堝櫒銆

1銆侀栧厛錛屾墦寮html緙栬緫鍣錛屾柊寤篽tml鏂囦歡錛屼緥濡傦細index.html錛屽苟寮曞叆jquery銆

⑵ jquery鎴杍s娓呴櫎鎵鏈塻tyle

鐢ㄦｅ垯錛岀劧鍚庡啓涓閬嶅巻銆

⑶ Jquery有哪些選擇器

選擇器是jQuery最基礎的東西，本文中列舉的選擇器基本上囊括了所有的jQuery選擇器，也許各位通過這篇文章能夠加深對jQuery選擇器的理解，它們本身用法就非常簡單，我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進行了介紹，也列舉出了一些需要注意和區分的地方。
一、基本選擇器
1.id選擇器（指定id元素）
將id="one"的元素背景色設置為黑色。（id選擇器返單個元素）
$(document).ready(function(){
$('#one').css('background','#000');
});
2.class選擇器（遍歷css類元素）
將class="cube"的元素背景色設為黑色
$(document).ready(function(){
$('.cube').css('background','#000');
});
3.element選擇器（遍歷html元素）
將p元素的文字大小設置為12px
$(document).ready(function(){
$('p').css('font-size','12px');
});
4.*選擇器（遍歷所有元素）
$(document).ready(function(){
//遍歷form下的所有元素，將字體顏色設置為紅色
$('form*').css('color','#FF0000');
});
5.並列選擇器
$(document).ready(function(){
//將p元素和div元素的margin設為0
$('p,div').css('margin','0');
});

二、層次選擇器
1.parent>child（直系子元素）
$(document).ready(function(){
//選取div下的第一代span元素，將字體顏色設為紅色
$('div>span').css('color','#FF0000');
});
下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
2.prev+next（下一個兄弟元素，等同於next()方法）
$(document).ready(function(){
//選取class為item的下一個div兄弟元素
$('.item+div').css('color','#FF0000');
//等價代碼
//$('.item').next('div').css('color','#FF0000');
});
下面的代碼，只有123和789會變色
<pclass="item"></p>
<div>123</div>
<div>456</div>
<spanclass="item"></span>
<div>789</div>

3.prev~siblings（prev元素的所有兄弟元素，等同於nextAll()方法）
$(document).ready(function(){
//選取class為inside之後的所有div兄弟元素
$('.inside~div').css('color','#FF0000');
//等價代碼
//$('.inside').nextAll('div').css('color','#FF0000');
});
下面的代碼，G2和G4會變色
<divclass="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

三、過濾選擇器
1.基本過濾選擇器
——1.1:first和:last（取第一個元素或最後一個元素）
$(document).ready(function(){
$('span:first').css('color','#FF0000');
$('span:last').css('color','#FF0000');
});
下面的代碼，G1（first元素）和G3（last元素）會變色
<span>G1</span>
<span>G2</span>
<span>G3</span>

——1.2:not（取非元素）
$(document).ready(function(){
$('div:not(.wrap)').css('color','#FF0000');
});
下面的代碼，G1會變色
<div>G1</div>
<divclass="wrap">G2</div>

但是，請注意下面的代碼：
<div>
G1
<divclass="wrap">G2</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
<tablewidth="200"cellpadding="0"cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table>

——1.4:eq(x)（取指定索引的元素）
$(document).ready(function(){
$('tr:eq(2)').css('background','#FF0000');
});
更改第三行的背景色，在上面的代碼中C的背景會變色。
——1.5:gt(x)和:lt(x)（取大於x索引或小於x索引的元素）
$(document).ready(function(){
$('ulli:gt(2)').css('color','#FF0000');
$('ulli:lt(2)').css('color','#0000FF');
});
L4和L5會是紅色，L1和L2會是藍色，L3是默認顏色
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>

——1.6:header（取H1~H6標題元素）
$(document).ready(function(){
$(':header').css('background','#EFEFEF');
});
下面的代碼，H1~H6的背景色都會變
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

2.內容過濾選擇器
——2.1:contains(text)（取包含text文本的元素）
$(document).ready(function(){
//dd元素中包含"jQuery"文本的會變色
$('dd:contains("jQuery")').css('color','#FF0000');
});
下面的代碼，第一個dd會變色
<dl>
<dt>技術</dt>
<dd>jQuery,.NET,CLR</dd>
<dt>SEO</dt>
<dd>關鍵字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl>

——2.2:empty（取不包含子元素或文本為空的元素）
$(document).ready(function(){
$('dd:empty').html('沒有內容');
});
上面第三個dd會顯示"沒有內容"文本
——2.3:has(selector)（取選擇器匹配的元素）
$(document).ready(function(){
//為包含span元素的div添加邊框
$('div:has(span)').css('border','1pxsolid#000');
});
即使span不是div的直系子元素，也會生效
<div>
<h2>
A
<span>B</span>
</h2>
</div>
——2.4:parent（取包含子元素或文本的元素）
$(document).ready(function(){
$('olli:parent').css('border','1pxsolid#000');
});
下面的代碼，A和D所在的li會有邊框
<ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol>

3.可見性過濾選擇器
——3.1:hidden（取不可見的元素）
jQuery至1.3.2之後的:hidden選擇器僅匹配display:none或<inputtype="hidden"/>的元素，而不匹配visibility:hidden或opacity:0的元素。這也意味著hidden只匹配那些「隱藏的」並且不佔空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。
參照：http://www.jquerysdk.com/api/hidden-selector
下面的代碼，先彈出"hello"對話框，然後hid-1會顯示，hid-2仍然是不可見的。
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
div
{
margin:10px;
width:200px;
height:40px;
border:1pxsolid#FF0000;
display:block;
}
.hid-1
{
display:none;
}
.hid-2
{
visibility:hidden;
}
</style>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
</body>
</html>
——3.2:visible（取可見的元素）
下面的代碼，最後一個div會有背景色
<scripttype="text/javascript">
$(document).ready(function(){
$('div:visible').css('background','#EEADBB');
});
</script>
<divclass="hid-1">display:none</div>
<divclass="hid-2">visibility:hidden</div>
<inputtype="hidden"value="hello"/>
<div>
jQuery選擇器大全
</div>
4.屬性過濾選擇器
——4.1[attribute]（取擁有attribute屬性的元素）
下面的代碼，最後一個a標簽沒有title屬性，所以它仍然會帶下劃線
<scripttype="text/javascript">
$(document).ready(function(){
$('a[title]').css('text-decoration','none');
});
</script>
<ul>
<li><ahref="#"title="DOM對象和jQuery對象"class="item">DOM對象和jQuery對象</a></li>
<li><ahref="#"title="jQuery選擇器大全"class="item-selected">jQuery選擇器大全</a></li>
<li><ahref="#"title="jQuery事件大全"class="item">jQuery事件大全</a></li>
<li><ahref="#"title="基於jQuery的插件開發"class="item">基於jQuery的插件開發</a></li>
<li><ahref="#"title="Wordpress&jQuery"class="item">Wordpress&jQuery</a></li>
<li><ahref="#"class="item">其他</a></li>
</ul>
——4.2[attribute=value]和[attribute!=value]（取attribute屬性值等於value或不等於value的元素）
分別為class="item"和class!=item的a標簽指定文字顏色

⑷ 如何用js或則jquery過濾特殊字元

1、jQuery使用正則匹配替換特殊字元

functionRegeMatch(){
varpattern=newRegExp("[~'!@#$%^&*()-+_=:]");
if($("#name").val()!=""&&$("#name").val()!=null){
if(pattern.test($("#name").val())){
alert("非法字元！");
$("#name").attr("value","");
$("#name").focus();
returnfalse;
}
}
}

2、jQuery限制輸入ASCII值

//數字0-9的ascii為48-57
//大寫A-Z的ascii為65-90
//小寫a-z的ascii為97-122

//----------------------------------------------------------------------
//<summary>
//限制只能輸入數字和字母
//</summary>
//----------------------------------------------------------------------
$.fn.onlyNumAlpha=function(){
$(this).keypress(function(event){
vareventObj=event||e;
varkeyCode=eventObj.keyCode||eventObj.which;
if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||(keyCode>=97&&keyCode<=122))
returntrue;
else
returnfalse;
}).focus(function(){
this.style.imeMode='disabled';
}).bind("paste",function(){
varclipboard=window.clipboardData.getData("Text");
if(/^(d|[a-zA-Z])+$/.test(clipboard))
returntrue;
else
returnfalse;
});
};


//-----調用方法$("#文本框id").onlyNumAlpha();

3、js正則匹配過濾

functionstripscript(s)
{
varpattern=newRegExp("[`~!@#$^&*()=|{}':;',\[\].<>/?~！@#￥……&*（）——|{}【】『；：」「'。，、？]")
varrs="";
for(vari=0;i<s.length;i++){
rs=rs+s.substr(i,1).replace(pattern,'');
}
returnrs;
}

⑸ jquery中簡單過濾選擇器有哪些

1. 基本過濾選擇器
a) ":first"，選取第一個元素，別忘記它也是被放在一個集合里哦！因為JQuery它是DOM對象的一個集合。如，「$("tr:first")」返回所有tr元素的第一個tr元素，它仍然被保存在集合中。
b)「:last」，選取最後一個元素。如，「$("tr:last")」返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。
c)「:not(selector)」，去除所有與給定選擇器匹配的元素。如，「$("input:not(:checked)")」返回所有input元素，但去除被選中的元素（單選框、多選框）。
d)「:even」，選取所有元素中偶數的元素。因為JQuery對象是一個集合，這里的偶數指的就是集合的索引，索引從0開始。
e) 「:odd」，選取所有元素中奇數的元素，索引從0開始。
f) 「:eq(index)」，選取指定索引的元素，索引從0開始。
g) 「:gt(index)」，選取索引大於指定index的元素，索引從0開始。
h) 「:lt(index)」，選取索引小於指定index的元素，索引從0開始。
i) 「:header」，選取所有的標題元素，如hq、h2等。
j) 「:animated」，選取當前正在執行的所有動畫元素。

2). 內容過濾選擇器
它是對元素和文本內容的操作。
a) 「:contains(text)」，選取包含text文本內容的元素。
b) 「:empty」，選取不包含子元素或者文本節點的空元素。
c) 「:has(selector)」，選取含有選擇器所匹配的元素的元素。
d) 「:parent」，選取含有子元素或文本節點的元素。（它是一個父節點）

3). 可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素。
「:hidden」，選取所有不可見元素。
「:visible」，選擇所有可見元素。
可見選擇器：hidden 不僅包含樣式屬性 display 為 none 的元素，也包含文本隱藏域 (<input type=「hidden」>)和 visible:hidden 之類的元素。

4).屬性過濾選擇器
通過元素的屬性來選取相應的元素。
a) 「[attribute]」，選取擁有此屬性的元素。
b) 「[attribute=value]」，選取指定屬性值為value的所有元素。
c) 「[attribute !=value]」，選取屬性值不為value的所有元素。
d) 「[attribute ^= value]」，選取屬性值以value開始的所有元素。
e) 「[attribute $= value]」，選取屬性值以value結束的所有元素。
f) 「[attribute *= value]」，選取屬性值包含value的所有元素。
g) 「[selector1] [selector2]…[selectorN]」，復合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合。

5). 子元素過濾選擇器
一看名字便是，它是對某一元素的子元素進行選取的。
a) 「:nth-child(index/even/odd)」，選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。
l nth-child(even/odd)：能選取每個父元素下的索引值為偶(奇)數的元素。
l nth-child(2)：能選取每個父元素下的索引值為 2 的元素。
l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數的元素。
l nth-child(3n + 1)：能選取每個父元素下的索引值是 3n + 1的元素。
b) 「:first-child」，選取第一個子元素。
c) 「:last-child」，選取最後一個子元素。
d) 「:only-child」，選取唯一子元素，它的父元素只有它這一個子元素。

6). 表單過濾選擇器
選取表單元素的過濾選擇器。
a) 「:input」，選取所有<input>、<textarea>、<select >和<button>元素。
b) 「:text」，選取所有的文本框元素。
c) 「:password」，選取所有的密碼框元素。
d) 「:radio」，選取所有的單選框元素。
e) 「:checkbox」，選取所有的多選框元素。
f) 「:submit」，選取所有的提交按鈕元素。
g) 「:image」，選取所有的圖像按鈕元素。
h) 「:reset」，選取所有重置按鈕元素。
i) 「:button」，選取所有按鈕元素。
j) 「:file」，選取所有文件上傳域元素。
k) 「:hidden」，選取所有不可見元素。

7).表單對象屬性過濾選擇器
選取表單元素屬性的過濾選擇器。
「:enabled」，選取所有可用元素。
「:disabled」，選取所有不可用元素。
「:checked」，選取所有被選中的元素，如單選框、復選框。
「:selected」，選取所有被選中項元素，如下拉列表框、列表框。