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="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（隐藏）

}

}

 

 

 

 

时间： 2024-10-18 17:33:27

jQuery选择器与JavaScript易出错知识点的相关文章

jQuery 选择器和JavaScript 选择器的技巧与异常原因

jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器变得简洁易用. 而且避免了易错问题. jquery选择器返回的永远是一个数组对象,如果没有找到指定的元素,就会返回一个空的数组, 所以判断一个jquery对象是否存在时,不能用如下语句 if($("tr")){ //code } 而应该用数组长度来判断,如下语句 if($("tr

Javascript易错知识点

? JS易错知识点总结: == 和 === 的区别: ==:判断两个变量的值是否相等. ===:判断两个变量的类型和值是否都相等,两个条件同时满足时,表达式为True. switch中break的作用: 如果一个case后面的语句,没有写break,那么程序会向下执行,而不会退出: 例如:当满足条件的case 2下面没有break时,case 3也会执行 1 var num = 2; 2 switch(num){ 3 case 1: 4 alert('case 1'); 5 break; 6 c

JavaScript易错知识点整理

本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点. JavaScript知识点 1.变量作用域 var a = 1; function test() { var a = 2; console.log(a); // 2 } test(); 上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. var a

JavaScript 易错知识点整理

本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点. JavaScript知识点 1.变量作用域 var a = 1;function test() { var a = 2; console.log(a); // 2} test();上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. var a =

JavaScript易混淆知识点小回顾--数组方法与字符串方法;

数组属性: arr.length;查看数组的长度 arr.Pop;删除数组最后一个元素; 数组的方法: arr.push();添加到数组末端; arr.shift();删除数组的第一个元素; arr.unshift();在数组最前面添加一个元素; arr.jojn();将得到的所有元素转换成字符串; arr.reverse();颠倒数组元素的位置; arr.slice(i,j);获取从i到j的数组,不改变原数组; i为开始截取的索引值,负数代表从末尾算起的索引值,-1为倒数第一个字符,j为结束的

JavaScript（15）jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

Javascript - Jquery选择器

选择器(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要实例化$对象,提供作为参数的选择器就可以很轻易的获取DOM元素的数组表示. 选择器 基本选择器 通过标签名.ID.类名获取元素. 标签选择:$ ( 'p' ) 选择所有P元素. ID选择:$ ( '#box' ) 选择ID为box的元素. 类名选择:$ ( '.box' ) 选择类名为box的元素. 限定选择:$(di

JavaScript之jQuery-2 jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)

一.jQuery 选择器 jQuery 选择器简介 - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为 - 使用 jQuery 选择器能够将内容与行为分离 - 学会使用选择器是学习 jQuery 的基础 jQuery 选择器的优势 - 简洁的写法: - $()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用 - 支持 CSS1 到 CSS3 选择器 - jQuery 选择器支持 CSS1.CSS2 和 CSS3 选择器,同时拥有少量独