首页 > 代码库 > 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(){
            $("divparent").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易出错知识点