jQuery 单引号和双引号区别

引号和双引号的使用:

$("div td:nth-child("+iNum+"), th:nth-child("+iNum+")").addClass("on").show();
    function disp(divs){
    for(var i=0;i<divs.length;i++)
    $(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));
}

属性选择器

使用属性选择器加单引号和不加单引号,程序都能正确运行,为了程序的可读性,最好是加上单引号(个人习惯);

$("div a[title]");

$("div a[title='isaac']")

$("div a[href^='pdf']") 以pdf开头

$("div a[href$='pdf']") 以pdf结尾

$("div a[href*='pdf']") 包含字符串pdf

json格式: 属性值必须加引号, 而属性可加可不加

attr({json})

$("div img").attr({src: "02.jpg", title: "紫金公寓", alt: "紫金公寓"});

css({json})

$("div p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

注意：带横线的属性必须加引号; font-size也可写成fontSize;

属性值带单位(如px)的必须加引号;

animate({json})

$("#block").animate({left: "-=90px"},300); //相对左移
$("#block").animate({
  opacity: "0.5",
  width: "80%",
  height: "100px",
  borderWidth: "5px",
  fontSize: "16px",
  marginTop: "45px",
  marginLeft: "24px"
},2000);

注意：border-width不被支持(即使加引号也不支持, 属于极其特殊情况, 而font-size加引号是被支持的), parem参数必须采用驮峰式写法, 且不带横线, 与CSS样式使用DOM名称一致。

CSS样式使用DOM名称(比如"fontSize")来设置, 而非CSS名称(比如"font-size")。

CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(id选择器),而jQuery中的"$"作为选择器,同样是某一类或某一元素,只不过

jQuery提供了更多更全面的选择方式,并且为用户处理了浏览器的兼容问题。

例如:在CSS样式中 h2 a{ /* */}

而在jQuery则可以使用$("h2 a")

实例:

<html>
<head>
<title>$选择器</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
window.onload=function(){
    var oElements=$("h2 a"); //选择匹配元素
    for(var i=0;i<oElements.length;i++)
    oElements[i].innerHTML=i.toString();
}
</script>
</head>
<body>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</body>
</html>

我们可以看到jQuery很轻松地轻松地实现了元素的选择;

ID选择器：查找 ID 为"myDiv"的元素。

$("#myDiv");

注意：如果文档中包含多个相同 ID 值的元素，那么 ID 选择器只返回第一个元素

标签选择器：查找所有 DIV 元素。

$("div");

类别选择器：查找类为"myclass"元素

$(".myClass");
<div className="myClass">jQuery</div>

类别选择器奇偶性选择(从0开始计数)

$("p:odd");
$("p:even");

选择第一个元素（从第1开始计数）

$("td:nth-child(1)");

$("li a")

后代选择器, 返回<li>标记的所有子元素<a>, 包括孙标记(不考虑层次);

$("li > a")

子选择器, 返回<li>标记的所有子元素<a>, 不包括孙标记;

$("p + ul") 紧邻

所有ul标记, 并且该标记前面紧跟着ul标记;

匹配p元素之后紧邻的ul元素(p元素与ul是同辈)

$("p ~ ul") ~ 键盘左上角的非紧邻

所有ul标记,并且该标记前面有一个ul标记;

匹配p元素之后的所有ul元素(p元素与ul是同辈)

$("p.myClass");

所有名称为p的标记,属性类别为myClass的标记;

$("p#myDiv");

所有名称为p的标记,ID选择符为myDiv的标记;

$(document.body)

$(document.body)和$("body")两种写法代表的是同一个对象

$("body")是一个选择器, jQuery 会从 DOM 顶端开始搜索, 直到找到标签为 body 的元素。

而 $(document.body) 中的 document.body 已经是一个 DOM 对象, jQuery 可以直接使用此元素。

所以它们的区别在于效率, $(document.body) 高于 $("body");

找到匹配任意一个类的元素。

$("div,span,p.myClass");

符号"," 选择多个元素

使用属性选择器

$("a[title]");

$("a[title='isaac']")

$("a[href^='pdf']") 以pdf开头

$("a[href$='pdf']") 以pdf结尾

$("a[href*='pdf']") 包含字符串pdf

$("a[title=isaac]")

$("a[href^=pdf]") 以pdf开头,单引号可以不要

$("a[href$=pdf]") 以pdf结尾,单引号可以不要

$("a[href*=pdf]") 包含字符串pdf,单引号可以不要

$("a[title][href$=pdf]") 并且选择器, 需要满足多个条件时使用

属性选择器可以是自定义属性, 如: <li dataIndex='1'></li>

$("a[href$='pdf']")

选择所有超链接,并且这些超链接的href属性是以pdf结尾的；

$("input[name^='news']")

查找所有 name 以 'news' 开始的 input 元素

实例:

jQuery代码:

$(function(){
$("a[title^='制作中']").addClass("myClass");
/* $("a[title^=制作中]").addClass("myClass"); 这里的单引号(包括汉字)可以不要,程序仍可正常运行; */
});

HTML代码:

<ul>
<li><a href="http://picasaweb.google.com/isaacshun">isaac photo</a>
<ul>
<li>10-6.html</li>
<li><a href="10-7.html">10-7.html</a></li>
<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
<li><a href="10-9.html">10-9.html</a></li>
<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
</ul>
</li>
</ul>

使用位置选择符

:first $("tr:first")

:last

必须要有父元素(HTML代码中)

:first-child $("ul li:first-child") $("li:first-child") 都可以

:last-child

:only-child 唯一的子元素

如：li:only-child匹配[ <li>独生子女</li> ]

<ol>
<li>独生子女</li>
</ol>

:first与:first-child区别:

':first' 只匹配一个元素(整个页面), 而:first-child选择符将为每个父元素匹配一个子元素

jQuery代码：

$(function(){
$("#btn").click(function(){
$("li:first-child").html("比阿奴方"); //匹配到[ <li>刘备</li>, <li>PHP</li> ]
$("li:first").html("程序员"); //匹配到[ <li>刘备</li>]
})
})

HTML代码：

<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<ul>
<li>PHP</li>
<li>javascript</li>
<li>CSS</li>
</ul>
<button id="btn">确定</button>

从1开始计数(对于其父标记内)

:nth-child(n) $("ul li:nth-child(2)") $("li:nth-child(2)") 都可以

:nth-child(odd|even)

:nth-child(nX+y)

如:nth-child(5n+1) (1,6,11,16.......)

从0开始计数(对于整个页面)

:odd $("tr:odd")

:even

:eq(n) equal

:gt(n) 页面中第n个元素之后的所有元素(不包括第n个本身) less than(lt)

:lt(n) 页面中第n个元素之前的所有元素(不包括第n个本身) greate than(gt)

使用包含选择器

:has(selector) 括号内可以不用双引号 $("div:has(a)");

给所有包含 p 元素的 div 元素添加一个 text 类

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

HTML 代码:

<div><p>Hello</p></div>
<div>Hello again!</div>

[ <div class="test"><p>Hello</p></div> ]

使用过滤选择器可以单独使用

:animated 所有处于动画中的元素指的是执行了animate函数的元素

:button 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记

:checkbox 所有的复选框, 等同于input[type=checkbox]

:contains(text) 选择所有包含了文本"text"的元素括号内(text)必须加单引号

:disabled 页面中被禁用了的元素

:enabled 页面中没有被禁用的元素

:file 上传文件的元素，等同于input[type=file]

:header 选中所有的标题元素，例如<h1><h2>...<h6>

:hidden 匹配所有不可见元素，或者type为hidden的元素,如<tr style="display:none"><td>Value 1</td></tr>也算是不可见元素

如果需要匹配<input type="hidden" value="1000" /> 则需要使用$("input:hidden")才能匹配

:image 图片提交按钮，等同于input[type=image]

:input 表单元素，包括<input>、<select>、<textarea>、<button>

:not(filter) 反向选择,参数filter必须是过滤选择器错误的写法:div:not(p:hidden) 正确写法格式：div p:not(:hidden)

:parent 选择所有拥有子元素(包括文本)的元素，空元素被排除

:password 密码文本框，等同于input[type=password]

:radio 单选按钮，等同于input[type=radio]

:reset 重置按钮，包括input[type=reset]和button[type=reset]

:checked 匹配所有选中的被选中元素(复选框、单选框等, 不包括select中的option)

:selected 下拉菜单中被选中的项

:submit 提交按钮, 包括input[type=submit]和button[type=submit]

:text 文本输入框, 等同于input[type=text]

:visible 页面中的所有可见元素

:animated 匹配所有正在执行动画效果的元素

HTML 代码:

<button id="run">Run</button><div></div>

jQuery 代码:

$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

:contains(text) 匹配包含给定文本的元素

查找所有包含 "John" 的 div 元素

HTML 代码:

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

注意括号内必须加单引号

:hidden 页面中被隐藏了的元素

实例1:查找隐藏的 tr

HTML 代码:

<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:hidden")

如何判断一个元素是否隐藏

$("#delayTrain").is(":hidden")

实例2:匹配type为hidden的元素

HTML 代码:

<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>

jQuery 代码:

$("input:hidden")

:visible 匹配所有的可见元素

查找所有可见的 tr 元素

HTML 代码:

<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:visible")

结果:

[ <tr><td>Value 2</td></tr> ]

:disabled 匹配所有不可用元素

查找所有不可用的input元素

HTML 代码:

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

jQuery 代码:

$("input:disabled")

:enabled 页面中没有被禁用的元素

查找所有可用的input元素

HTML 代码:

<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

jQuery 代码:

$("input:enabled")

结果:

[ <input name="id" /> ]

:empty 用法: $("td:empty")

返回值集合元素

说明: 匹配所有不包含子元素或者文本的空元素

注意:这里是":empty",可不是".empty"哦!

查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]

:parent 匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素

HTML 代码:

<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 2</td> ]

迭代使用

$(":checkbox:checked:enabled")

表示<input type="checkbox">中所有被用户选中而且没有被禁用的

实现反向过滤

$(":input:not(:radio)")

如

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//迭代使用选择器
$(":input:not(:checkbox):not(:radio)").addClass("myClass");
});
</script>

$(":input:not(:checkbox):not(:radio)").addClass("myClass");

表示所有<input>、<select>、<textarea>、<button>中非checkbox和非radio的元素,

注意input 和 :input的区别?

$("input")只选择input标签。如：<input id="" type="" name="" />

而$(":input")是伪类选择, 不单单是input, 还包括textarea和select;

如: <input />, <textarea></textarea>, <select></select>

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

children([expr]) parents()将查找所有祖辈元素, 而children()只考虑子元素而不考虑所有后代元素。

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

如何获取单选框的值

$("input[type='radio']:checked").val();

、JS和jQuery的对比

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript。

jQuery是一个快速、简洁的JavaScript框架，设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情，极大地简化了 JavaScript 编程，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、对比

1、关于引号

在js中单引号和双引号都是一样的，平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号。即外面是单引号的时候里面就要用双引号，外面是双引号的时候里面就要用单引号，总之不能同时用双引号或者是单引号；

2、选择器

JavaScript:

document.getElementById("intro");

jQuery:

$("#intro")

3、文档就绪事件：

(1)JavaScript

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

实例代码（页面加载完成后，立即显示文本内容）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择器对比</title>
</head>
?
<body>
<div id="con"></div>
<script type="text/javascript">
window.onload=function(){
    document.getElementById('con').innerHTML='显示文本测试';
}
</script>
</body>
</html>

(2)jQuery

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

$(document).ready(function(){
   // 开始写 jQuery 代码...
 });

简洁写法：

$(function(){
   // 开始写 jQuery 代码...
});

实例代码（页面DOM完全就绪后，立即显示文本内容）：

在线咨询

上一篇：个人收藏的必备网页设计控件，也许正是你在寻找的（二）
下一篇：CSS border-style 属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery 单引号和双引号区别

二、对比

您的项目需求