选择器（类、标签选择器）
1、给设置c1的样式字体颜色变红色
1 <body> 2 <input type="button" value="我是一个按钮" id="btn"/> 3 <div class="c1">jquery1</div> 4 <div class="c1">jquery2</div> 5 <div class="c1">jquery3</div> 6 <div>jquery4</div> 7 </body>
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $(".c1").css("color","#f00"); 5 }); 6 });
2、给所有的div样式字体变蓝色
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("div").css("color","blue"); 5 }); 6 });
3、隔行换色效果
1 <input type="button" value="我是一个按钮" id="btn"/> 2 <table id="tab"> 3 <tr><th>姓名</th><th>学号</th><th>年龄</th><th>班级</th></tr> 4 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 5 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 6 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 7 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 8 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 9 <tr><td>张三</td><td>120</td><td>20</td><td>1</td></tr> 10 </table>
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("#tab tr:odd").css("background-color", "#00ffff"); 5 $("#tab tr:even").css("background-color", "#ffd800");//偶数 从0开始 6 }); 7 });
4、第一列（表格为例）
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("#tab td:nth-child(1),#tab th:nth-child(1)").css("background-color", "#00ffff"); 5 }); 6 });
5、标签下面的子元素用>表示
1 <input type="button" value="我是一个按钮" id="btn"/> 2 <div id="cid"> 3 <a href="">你好1</a> 4 <div class="c2"><a href="">你好2</a></div> 5 <a href="">你好3</a> 6 </div>
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("#cid>a").css("color","#f00"); 5 }); 6 });
6、属性选择器
设置title属性的a
1 <input type="button" value="我是一个按钮" id="btn"/> 2 <div id="cid"> 3 <a href="www.sina.com">你好1</a> 4 <a href="http:www.soso.com">你好2</a> 5 <a href="hhtp://www.baidu.com" title="">你好3</a> 6 <a href="www.baidu.com">你好4</a> 7 </div>
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("#cid a[title]").css("color","#f00"); 5 }); 6 });
1 <input type="button" value="我是一个按钮" id="btn"/> 2 <div id="cid"> 3 <a href="www.sina.com">你好1</a> 4 <a href="http:www.soso.cn">你好2</a> 5 <a href="hhtp://www.baidu.com" title="">你好3</a> 6 <a href="www.baidu.com">你好4</a> 7 </div>
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("#cid a[href^=www]").css("color", "#f00");//^=以...开头 5 $("#cid a[href$=cn]").css("color", "#f00");//$=以...结尾 6 $("#cid a[href*=baidu]").css("color", "#f00");//*=包含 7 $("#cid a[href='www.sina.com'").css("color", "#f00");//等于 加单引号 8 9 }); 10 });
7、包含选择器 has
1 $(function () { 2 $("#btn").click(function () { 3 $("ul li:has(a)").css("background-color","#f00"); 4 }); 5 });
8、位置选择器(first last first-child last-child)
first-child:父标签的第一个子标签
1 /// <reference path="_references.js" /> 2 $(function () { 3 $("#btn").click(function () { 4 $("p:first").css("color","#f00"); 5 }); 6 });
/// <reference path="_references.js" /> $(function () { $("#btn").click(function () { $("p:last").css("color","#0f0"); }); });
/// <reference path="_references.js" /> $(function () { $("#btn").click(function () { $("p:first-child").css("color","#0f0"); }); });
9、trim（）去空格
/// <reference path="_references.js" /> $(function () { $("#btn").click(function () { var sInput =$.trim( $("#txt").val()); alert(sInput); }); });
去掉中间空格
/// <reference path="_references.js" /> $(function () { $("#btn").click(function () { var sInput =$.trim( $("#txt").val()); var aInput = sInput.split(''); for (var i = 0; i < aInput.length;i++){ if(aInput[i]==" "){ sInput = sInput.replace(" ", ""); } } alert(sInput); }); });