首页 > 代码库 > jQuery选择器与JavaScript易出错知识点
jQuery选择器与JavaScript易出错知识点
一．jQuery选择器
基本选择器
1.Id(根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。）
jQuery代码为$(“#myclass”)
若有特殊字符则
HTML代码为<span id=“myclass[1]”
jQuery代码为$(“#myclass\\[1\\]”)
2.Class(一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到）
jQuery代码为$（“.myclass”）
3.Element（根据给定的元素名匹配所有元素）
jQuery代码为$(“div”)
4.*（匹配所有元素）
5.Selector1，selector2，selector3（将每一个选择器匹配到的元素合并后一起返回）
$(“div,span,p.myClass”)
层级选择器
1.ancestor descendant（在给定的祖先元素下匹配所有的后代元素）
Descendant代表用以匹配元素的选择器，并且它是第一个选择器的后代元素
HTML代码为
<form>
<label>Name:</label>
<span><p> <input name="name" /></p></span>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码为
$(function(){ $(function(){$("form input").css("background-color","red");}) })
结果为：<input name="name" />, <input name="newsletter" />
2.parent>child（在给定的父元素下匹配所有的子元素）
Child代表为用以匹配元素的选择器，并且它是第一个选择器的子元素
HTML代码为
<form>
<label>Name:</label>
<input name="name" />
<input name=”what”/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代码为
$(function(){ $(function(){$("form>input").css("background-color","red");}) })
结果为：<input name="name" /> <input name=”what”/>
1,2可以说是一类，都是在标签里面找
3.prev+next（匹配所有紧接在prev元素后的next元素）
其中prev可以是id给定的值或class给定的值（当有多个相同标签时，可以先设定一个id地址）
Next代表一个有效选择器并且紧接着第一个选择器。
HTML代码为
<form>
<input name="li">
<label>Name:</label>
<input name="name" />
<fieldset>
<input name="li">
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none1" />
<input name="none2" />
jQuery代码为：$(function(){ $(function(){$("form+input").css("background-color","red");}) })
结果为：<input name="none1" />
4.prev~siblings(匹配prev元素之后的所有siblings元素）
其中prev可以是id给定的值或class给定的值（当有多个相同标签时，可以先设定一个id地址）
Siblings代表一个选择器，并且它作为第一个选择器的同辈
HTML代码为：
<form>
<input name="li">
<label>Name:</label>
<input name="name" />
<fieldset>
<input name="li">
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none1" />
<input name="none2" />
jQuery代码为：$(function(){ $(function(){$("form~input").css("background-color","red");}) })
结果为：<input name="none1" /><input name="none2" />
3,4可以说是一类，都是选择标签以后的元素
基本过滤选择器
1.：first（获取第一个元素）
HTML代码：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery代码为：
$(function(){$(function(){$("li:first").css("background-color","red");}) })
结果为： <li>list item 1</li>
2.：last（）（获取最后个元素）
HTML代码为：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery代码为：
$(function(){$(function(){$("li:last").css("background-color","red");}) })
结果为： <li>list item 5</li>
1,2为一类
3.：not （selector）（去除所有与给定选择器匹配的元素）
4,5,6,7,8用同一个HTML代码：
<input name="0">
<input name="1">
<input name="2">
<input name="3">
<input name="4">
<input name="5">
<input name="6">
<input name="7">
4.：even（匹配所有索引值为偶数的元素，从零开始计数）
jQuery代码为：$(function(){$("input:even").css("background-color","red")})
结果为： <input name="0"> <input name="2"> <input name="4"> <input name="6">
5.：odd(匹配所有索引值为奇数的元素，从零开始计数)
jQuery代码为：$(function(){$("input:odd").css("background-color","red")})
结果为：<input name="1"> <input name="3"> <input name="5"> <input name="7">
4,5为一类。
6.：eq（index）（匹配一个给定索引值的元素）
Index从零开始计数
jQuery代码为：$(function(){ $("input:eq(5)" ).css("background-color","red")})
结果为：<input name="5">
7.：gt（index）（匹配所有大于所给定索引值的元素）
Index从零开始
jQuery代码为:$(function(){$("input:gt(4)" ).css("background-color","red")})
结果为：<input name="5"> <input name="6"> <input name="7">
8.：lt（index）（匹配所有小于给定索引值的元素）
Index从零开始
jQuery代码为：$(function(){$("input:lt(3)" ).css("background-color","red")})
结果为：<input name="0"> <input name="1"> <input name="2">
4,5,6,7,8为同一个类型。
9.：header（匹配如h1，h2，h3之类的标题元素）
HTML代码为：
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery代码为：$(function(){ $(":header" ).css("background-color","red")})
结果为：<h1>Header 1</h1> <h2>Header 2</h2>
10.：animated（匹配所有正在执行动画效果的元素）
HTML代码为：
<button id="run">Run</button>
<div style="position: absolute;width: 200px;height: 200px;background: bottom;background-color: aqua"></div>
jQuery代码为：
$(function(){
$("#run").click(function(){
$("div:not(:animated)").animate({left:"+=100"},1000);
});
})
结果为：当点击按钮为Run时，青色的方块向右移动。
11.focus(触发每一个匹配元素的focus事件）
这个日后再说。。。
内容选择器
1.：contains（text）（匹配包含给定文本的元素）
Text代表一个用以查找的字符串
HTML代码为：
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
jQuery代码为：
$(function(){
$("div:contains(‘Ma‘)").css("background-color","red")
})
结果为：<div>George Martin</div> <div>Malcom John Sinclair</div>
2.：empty（匹配所有不包含子元素或者文本的空元素）
HTML代码为：
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery代码为：
$(function(){
$("td:empty").css("background","red")
})
结果为：<td></td> <td></td>
3.：has（selector）（匹配含有选择器所匹配的元素的元素）
Selector代表一个用于筛选的选择器
选取含有（selector）元素的前面标签元素
HTML代码为：
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery代码为：$(function(){
$("div:has(p)").css("background","red");
})
结果为：<p>Hello</p>
4.：parent（匹配含有子元素或者文本的元素）
一共两个实例，帮助理解
第一个：
HTML代码为：
<div><p>我是文本</p></div>
<div></div>
<button>点击查看效果</button>
jQuery代码为：
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div：parent").animate({width:"300px"})//选取含有子元素或（包括文本元素）的<div>元素
})
})
</script>
<style type="text/css">
div{
list-style-type: none;
width: 150px;
height: 30px;
border: 1px solid #e444ff;
}
</style>
结果为：<div><p>我是文本</p></div>
第二个：
HTML代码：
<h1>欢迎来到我的主页</h1>
<table border="1">
<tr>
<th>序号</th>
<th>站点名</th>
<th>网址</th>
</tr>
<tr>
<td>1</td>
<td>Google</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Runoob</td>
<td>runoob.com</td>
</tr>
<tr>
<td>3</td>
<td>Taobao</td>
<td>taobao.com</td>
</tr>
<tr>
<td>4</td>
<td></td>
<td>baidu.com</td>
</tr>
<tr>
<td>5</td>
<td>Sina</td>
<td>sina.com</td>
</tr>
<tr>
<td>6</td>
<td>Facebook</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>twitter</td>
<td>twitter.com</td>
</tr>
<tr>
<td>8</td>
<td>youtube</td>
<td>youtube.com</td>
</tr>
</table>
<p>你可以向空的td插入一些内容，查看效果</p>
jQuery代码：
$(function(){
$("td:parent").css(‘background‘,‘red‘)
})
结果为：td标签里面有内容的会变色。
可见性过滤选择器
1.：hidden（选取所有不可见的元素）
$(‘:hidden’)选取所有不可见的元素，包括<input type=‘hidden’/>、<div style=’display:none;’>和<div style=’visibility:hidden;’>等元素。如果只想选取<input>元素，可以使用$(‘input:hidden;’）
2.：visible（选取所有可见的元素）
HTML代码：
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery代码：
$(function(){
$("tr:visible").css("background","red")
})
结果：Value 2变红
属性选择器
1.[attribute]（匹配包含给定属性的元素）
HTML代码：
<div>
<p>Hello!</p>
</div>
<div id="test2">ddd</div>
jQuery代码：$(function(){$(function(){$("div[id]").css("background-color","red");}) })
结果为：<div id="test2">ddd</div>
2.[attribute=value]（匹配给定的属性是某个特定值的元素）
HTML代码：
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Hot Fuzz" />
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" />
<input type="checkbox" name="accept" value=http://www.mamicode.com/"Evil Plans" />
jQuery代码：$(function(){$(function(){$("input[name=‘newsletter‘]").attr("checked",true);}) })
结果为：
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Hot Fuzz" />
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" />
3.[attribute!=value]（匹配所有不含有指定的属性，或者属性不等于特定值的元素）
HTML代码：
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Hot Fuzz" />
<input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" />
<input type="checkbox" name="accept" value=http://www.mamicode.com/"Evil Plans" />
jQuery代码：$(function(){$(function(){$("input[name！=‘newsletter‘]").attr("checked",true);}) })
结果为：<input type="checkbox" name="accept" value=http://www.mamicode.com/"Evil Plans" />
4.[attribute^=value]（匹配给定的属性是以某些值开始的元素）
HTML代码：
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery代码：$(function(){$(function(){$("input[name^=‘news‘]").css(‘background‘,‘red‘);}) })
结果为：<input name="newsletter" /> <input name="newsboy" />
5.[attribute$=value]（匹配给定的属性是以某些值结尾的元素）
HTML代码：
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery代码：$(function(){$(function(){$("input[name$=‘letter‘]").css(‘background‘,‘red‘);}) })
结果为：<input name="newsletter" /> <input name="jobletter" />
6.[attribute*=value]（匹配给定的属性是以包含某些值的元素）
HTML代码：
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery代码：$(function(){$(function(){$("input[name*=‘man‘]").css(‘background‘,‘red‘);}) })
结果为：<input name="man-news" /> <input name="milkman" /> <input name="letterman2" />
7.[selector1][selector2][selectorN]（复合属性选择器，需要同时满足多个条件时使用）
HTML代码：
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery代码：$(function(){$(function(){$("input[id][name$=‘man‘]").css(‘background‘,‘red‘);}) })
结果为：<input id="letterman" name="new-letterman" />
子元素选择器
1.：nth-child（匹配其父元素下的第N个子或奇偶元素）
（‘：eq（index）’只匹配一个元素，而这个将为每一个父元素匹配子元素。：nth-child从1开始的，而：eq（）是从0算起的！）
HTML代码：
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码：$(function(){$(function(){$("ul li:nth-child(2)").css(‘background‘,‘red‘);}) })
结果为： <li>Karl</li> <li>Tane</li>
2.:first-child(匹配第一个子元素）
‘:first‘ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
HTML代码：1中的代码相同
jQuery代码：$(function(){$(function(){$("ul li:first-child").css(‘background‘,‘red‘);}) })
结果为： <li>John</li> <li>Glen</li>
3.:last-child
与2意思相同，不做过多阐述。
4.：only-child（如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，拿奖不会被匹配。）
HTML代码：
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
jQuery代码：$(function(){$(function(){$("ul li:only-child").css(‘background‘,‘red‘);}) })
结果为： <li>Glen</li>
这个比较简单，自己去手册看吧。
祝你精通jQuery。
这次就到这里了。
二．JavaScript易出错知识点
1.连接外部js文件
若出现乱码，解决方法：
导入js时候设置一下charset
<script type="text/javascript" src="http://www.mamicode.com/lx.js" charset="gb2312"></script>
（Ps：网上找的方法。当我想引用js文件时，竟出现了乱码。而这种方法解决了乱码的问题
连接外部js文件出现乱码解决链接）
2.<input>标签中的name属性
（1）name属性规定<input>元素的名称。
例如：代码如下
<form action="h.php" method="get">
Name:<input type="text" name="fullname"><br/>
Email:<input type="text" name="email"><br/>
<input type="submit" value=http://www.mamicode.com/"提交">
</form>
程序运行：
当点击提交时，action属性将其提交数据到h.php页面
正是name属性将提交数据时的<input>名称命名为name设置的名字
（2）name属性用于在JavaScript中引用元素，或者在表单提交后引用表单数据。
上边当点击提交后，name命名的名称引用了表单所写数据。
3.执行动作效果的代码animated
例如：HTML代码为
<div id="box" style="width: 100px;height: 100px;background: #f00;position: absolute"></div>
jQuery代码为：$(function(){ $("#box").animate({right:1000},5000);
当然也可以加入图片进行滑动。
4.如何让一个元素隐藏或者显示
完整显示：
<div id="123" style="display:none;">
<p>显示的内容</p>
</div>
<div id="switch" onclick="mySwitch()">点击显示</div>
<script language="javascript">
function mySwitch(){
document.getElementById(‘123‘).style.display = document.getElementById(‘123‘).style.display==‘none‘?‘block‘:‘none‘;
}
</script>
三种方法：
<div id="show" style="display:none;">
<p>显示内容</p>
</div>
<div id="switch" onclick="showdiv()">点击显示</div>
<script language="javascript">
/*原生的js写法*/
function showdiv(){
if(showdiv_display = document.getElementById(‘show‘).style.display==‘none‘){//如果show是隐藏的
document.getElementById(‘show‘).style.display=‘block‘;//show的display属性设置为block（显示）
}else{//如果show是显示的
document.getElementById(‘show‘).style.display=‘none‘;//show的display属性设置为none（隐藏）
}
}
/*原生简写（三元运算）*/
function showdiv(){
/*
原理相同只是写法不同，判断show的display是不是none 是则设为block显示不是则设为none隐藏
*/
document.getElementById(‘show‘).style.display = document.getElementById(‘show‘).style.display=="none"?"block":"none";
}
/*jquery*/
function showdiv(){
if($("#show").css("display")==‘none‘){//如果show是隐藏的
$("#show").css("display","block");//show的display属性设置为block（显示）
}else{//如果show是显示的
$("#show").css("display","none");//show的display属性设置为none（隐藏）
}
}
jQuery选择器与JavaScript易出错知识点