jQuery选择器与JavaScript易出错知识点

Posted 2020-09-19

一．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="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码：$(function(){$(function(){$("input[name=‘newsletter‘]").attr("checked",true);})    })

结果为：

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
3.[attribute!=value]（匹配所有不含有指定的属性，或者属性不等于特定值的元素）

HTML代码：

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码：$(function(){$(function(){$("input[name！=‘newsletter‘]").attr("checked",true);})    })

结果为：<input type="checkbox" name="accept" value="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="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="提交">
            </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（隐藏）

 }

 }