- 浏览: 607547 次
- 性别:
- 来自: 郑州
文章分类
最新评论
-
AlanKay:
Mart_dai 写道Hi 齐晓威_518,我想问问,在exc ...
java 后台 Excel 文件生成后转化为字节流 -
18335864773:
国内的pageoffice插件也可以生成excel。也可以用流 ...
java 后台 Excel 文件生成后转化为字节流 -
JAVA_CLASSm:
你好,请问这个还有源码吗?我刚开始接触这个,想要源码学习一下. ...
同一账号不能多地登录(限制同一账号同一时刻只能一个用户登录使用,向QQ一样) -
pangjinquan:
...
前台JS获取后台的Json数据, 动态创建table并填充数据--转自一位朋友 -
lvjun106:
这是增加删除列,,,,
JQuery自动为表格增加一列
通过前段时间的一个小项目,自己对JQuery的使用也有些了解与自己的见解了,虽然还是难登大雅之堂,但是还是想把自己学习的点滴记录起来,而且在整理的同时比对jQueryAPI文档进行系统的重新学习,自己也好再学习一些遗漏的知识点,并且温故知新。发在blog上不图什么,就为自己查找方便,不用再去U盘里面翻看,所以高人莫喷,我就一菜鸟……
jQuery官方网站:http://jquery.com/ 可以通过这个地址下载到最新版的jQuery,自己使用的是V1.3.2版本。废话就不说了,还是先从基本的开始。选择器,API文档介绍的已经很详细了,自己这边再阐述一遍,一方面是自己重新记忆,另一方面是方便自己以后查找,因为选择器的正确使用,是很考验一个人的功力的,因为选择器实在太多了,而且通过简单的组合,就能达到任何所需的效果。
jQuery 基本选择器
jQuery选择器的符号与CSS样式表选择器一样,id使用#,class使用.,html选择器直接使用标签,如div,td等,还有其他多种选择器,后面会陆续介绍到。
[ id 选择器]
原本在JavaScript下,要想选择一个id=“aa”的需要这样:document.getElementById("aa"); 才能获取到aa这个对象,而通过jQuery选择器,只需这样:$("#aa") 就获取到了id为aa的对象,从而就可以对它进行操作,十分的方便。也是我使用最频繁的一个选择器。
如果查找含有特殊字符的元素,如:
<span id="aa:bb"></span>
<span id="aa[bb]"></span>
<span id="aa.bb"></span>
就需要使用反斜杠来进行字符的转义了,以上三个例子就需要这样获取到对应的对象:
$("#aa\\:bb")
$("#aa\\[bb\\]")
$("#aa\\.bb")
这样才能通过ID正确获取到该对象。如果存在多个id相同的对象,则只会匹配到第一次出现的。
[ class 选择器 ]
使用上与id选择器差不多,只是id用的是“ # ”而class选择器使用的就是“ . ”,只要class相同的,就能被匹配到,如:
<div class='notSelect'>不选择我</div>
<span class='selectMe'>选择我</div>
<p class='selectMe'>也选我</p>
使用$(".selectMe")将会匹配到<span class='selectMe'>选择我</div> 与 <p class='selectMe'>也选我</p>
[ * 选择器 ]
$("*")将会匹配到网页中所有的元素,我个人是没用过这个,因为好像用不到这种,不过了解下也好。
[ HTML 选择器 ]
如果需要选择网页中出现的所有div,则可以通过这种方式进行选择 $("div") ,用的也比较少,css中倒是经常这么来编辑样式,不过jQuery这种方式选择,是不是说可以用来整体修改某中html标签的整体样式?有空可以尝试一下。
[ 同时选择多种元素 ]
最后这种应该算是比 * 选择器范围小点的了,它可以选择多个元素,然后一起返回,用法是$("#id,p.myClass,div,span,td")
中间用“ , ”分开,就会将id为id的,class="myClass"的p标记,还有div,span,td都匹配到,并且返回。十分的牛X。
jQuery 索引值选择器
索引值都是从 0 开始的。也是非常有用的一种选择器。比如想让表格奇偶行显示不同的颜色,则可以使用索引值选择器进行操作。
[ :first 选择器 ] [ :last 选择器 ]
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
比如上面的html代码,我们需要查找到第一行的元素对象,则可以通过这样获取 $("tr:first") 就可以获得
<tr><td>Header 1</td></tr>
使用 $("tr:last") 就可以获取到 <tr><td>Value 2</td></tr> 元素对象
[ :not 选择器 ]
去除所有与给定选择器匹配的元素 在jQuery 1.3中,已经支持复杂选择器了,例如:not(div a) 和 :not(div,a)
查找所有未选中的 input 元素
<input name="apple" />
<input name="flower" checked="checked" />
使用 $("input:not(:checked)") 得到 <input name="apple" />
[ :even 偶选择器 ] [dd 奇选择器 ] 奇偶选择器
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
奇偶选择器是从0开始计算的,如果需要选择上面表格的偶行,则使用 $("tr:even") 选中
<tr><td>Header 1</td></tr> 与 <tr><td>Value 2</td></tr>
使用$("tr:odd") 选中 <tr><td>Value 1</td></tr>
[ :eq 索引选择器 ]
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
索引选择器,也是从0开始,如果我要选择第二行,则使用 $("tr:eq(1)")即可获得 <tr><td>Value 1</td></tr>
[ :gt 比给定索引大 ] [ :lt 比给定索引小 ] 的选择器
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)") 将匹配 <tr><td>Value 1</td></tr> 与 <tr><td>Value 2</td></tr> 选择比给定索引为 0 大的元素
$("tr:lt(2)") 将匹配 <tr><td>Header 1</td></tr> 与 <tr><td>Value 1</td></tr> 选择比给定索引为 2 小的元素
[ :header 标题元素选择器 ]
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
如果要选择h1,h2元素,则使用 $(":header") 即可获得 <h1>Header 1</h1> 与 <h2>Header 2</h2>元素,从而对它们进行操作,可以修改背景,或者字体等。
[ :animated 正在执行动画元素 选择器 ]
没用过这种选择器,API上介绍说是:只有对不在执行动画效果的元素执行一个动画特效。一个页面内,没动画的元素多了去了,如果都执行动画,那不卡死,不过通过这个选择器与其它选择器结合,倒是能执行很多功能。API实例:
<button id="run">Run</button><div></div>
执行如下代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
实现的效果,每1秒钟,不在执行动画的div元素向右移动20像素。
jQuery 层级选择器
一般情况下,通过上面的选择器,灵活的运用,就已经能方便,快捷的找到自己所需的绝大部分的元素了,但是,还有一些特殊情况下,可能通过上面的查找方式不太适合,并且效率上有所欠缺,所以我们还要了解层级选择器的用法,这样才能更方便,更高效的让jQuery为我们服务。
[ 先人 后代选择器 ]
先来看看实例:
<div>
<a href='chengwei2009.blog.163.com' >snail的博客</a>
<span>Snail的博客</span>
<input type='text' name='txtName' value='Snail_博客' />
<a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
</div>
<a href='chengwei2009.blog.163.com' >还是snail的博客</a>
这时,如果这么使用选择器 $("div a")将会选择到
<a href='chengwei2009.blog.163.com' >snail的博客</a> 与 <a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
比起$("a")将所有a标记都选中,范围小了很多,通过这种方式,我们可以选择某类或者某个id区域内的某种或者某个元素,先选中了“先人”,再去找它的“后代”,而不会盲目的查找全文,也是很有用的,比如说清空一个form中的input,如果不使用rest按钮,就可以使用这种方式来进行清除数据。
[ 父 > 子 选择器 ]
定义为:在给定的父元素下匹配所有的子元素。先看一个实例:
<div id ="parent">
<div>小儿子</div>
<div>大儿子
<div>孙子</div>
<div>孙女</div>
</div>
</div>
如果使用:$("#parent > div") 则只会匹配到<div>小儿子</div> 与 <div>大儿子</div> 不会再选择到“孙子”与“孙女”,当然,你要是通过大儿子,再去找孙子,孙女,是另外一回事。
[ 前 + 后 选择器 ]
格式 $("prev + next") 其中prev为:任何有效选择器,next为:一个有效选择器,并且紧跟在着第一个选择器后面,API文档上面的例子:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("label + input"),将得到 <input name="name" /> 与 <input name="newsletter" />
[ 前 ~ 同辈 选择器 ]
格式 $("prev ~ siblings") 其中prev为:任何有效选择器,siblings 一个选择器,并且它作为prev选择器的同辈,API文档例子:
找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("form ~ input")选择器,查找到的结果为:<input name="none" />
还有很多其他的选择器,就不一一列出来了,自己常用的也就是上面那些选择器,而且好像也够用了,不够用的再去API内进行查找。
jQuery官方网站:http://jquery.com/ 可以通过这个地址下载到最新版的jQuery,自己使用的是V1.3.2版本。废话就不说了,还是先从基本的开始。选择器,API文档介绍的已经很详细了,自己这边再阐述一遍,一方面是自己重新记忆,另一方面是方便自己以后查找,因为选择器的正确使用,是很考验一个人的功力的,因为选择器实在太多了,而且通过简单的组合,就能达到任何所需的效果。
jQuery 基本选择器
jQuery选择器的符号与CSS样式表选择器一样,id使用#,class使用.,html选择器直接使用标签,如div,td等,还有其他多种选择器,后面会陆续介绍到。
[ id 选择器]
原本在JavaScript下,要想选择一个id=“aa”的需要这样:document.getElementById("aa"); 才能获取到aa这个对象,而通过jQuery选择器,只需这样:$("#aa") 就获取到了id为aa的对象,从而就可以对它进行操作,十分的方便。也是我使用最频繁的一个选择器。
如果查找含有特殊字符的元素,如:
<span id="aa:bb"></span>
<span id="aa[bb]"></span>
<span id="aa.bb"></span>
就需要使用反斜杠来进行字符的转义了,以上三个例子就需要这样获取到对应的对象:
$("#aa\\:bb")
$("#aa\\[bb\\]")
$("#aa\\.bb")
这样才能通过ID正确获取到该对象。如果存在多个id相同的对象,则只会匹配到第一次出现的。
[ class 选择器 ]
使用上与id选择器差不多,只是id用的是“ # ”而class选择器使用的就是“ . ”,只要class相同的,就能被匹配到,如:
<div class='notSelect'>不选择我</div>
<span class='selectMe'>选择我</div>
<p class='selectMe'>也选我</p>
使用$(".selectMe")将会匹配到<span class='selectMe'>选择我</div> 与 <p class='selectMe'>也选我</p>
[ * 选择器 ]
$("*")将会匹配到网页中所有的元素,我个人是没用过这个,因为好像用不到这种,不过了解下也好。
[ HTML 选择器 ]
如果需要选择网页中出现的所有div,则可以通过这种方式进行选择 $("div") ,用的也比较少,css中倒是经常这么来编辑样式,不过jQuery这种方式选择,是不是说可以用来整体修改某中html标签的整体样式?有空可以尝试一下。
[ 同时选择多种元素 ]
最后这种应该算是比 * 选择器范围小点的了,它可以选择多个元素,然后一起返回,用法是$("#id,p.myClass,div,span,td")
中间用“ , ”分开,就会将id为id的,class="myClass"的p标记,还有div,span,td都匹配到,并且返回。十分的牛X。
jQuery 索引值选择器
索引值都是从 0 开始的。也是非常有用的一种选择器。比如想让表格奇偶行显示不同的颜色,则可以使用索引值选择器进行操作。
[ :first 选择器 ] [ :last 选择器 ]
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
比如上面的html代码,我们需要查找到第一行的元素对象,则可以通过这样获取 $("tr:first") 就可以获得
<tr><td>Header 1</td></tr>
使用 $("tr:last") 就可以获取到 <tr><td>Value 2</td></tr> 元素对象
[ :not 选择器 ]
去除所有与给定选择器匹配的元素 在jQuery 1.3中,已经支持复杂选择器了,例如:not(div a) 和 :not(div,a)
查找所有未选中的 input 元素
<input name="apple" />
<input name="flower" checked="checked" />
使用 $("input:not(:checked)") 得到 <input name="apple" />
[ :even 偶选择器 ] [dd 奇选择器 ] 奇偶选择器
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
奇偶选择器是从0开始计算的,如果需要选择上面表格的偶行,则使用 $("tr:even") 选中
<tr><td>Header 1</td></tr> 与 <tr><td>Value 2</td></tr>
使用$("tr:odd") 选中 <tr><td>Value 1</td></tr>
[ :eq 索引选择器 ]
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
索引选择器,也是从0开始,如果我要选择第二行,则使用 $("tr:eq(1)")即可获得 <tr><td>Value 1</td></tr>
[ :gt 比给定索引大 ] [ :lt 比给定索引小 ] 的选择器
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$("tr:gt(0)") 将匹配 <tr><td>Value 1</td></tr> 与 <tr><td>Value 2</td></tr> 选择比给定索引为 0 大的元素
$("tr:lt(2)") 将匹配 <tr><td>Header 1</td></tr> 与 <tr><td>Value 1</td></tr> 选择比给定索引为 2 小的元素
[ :header 标题元素选择器 ]
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
如果要选择h1,h2元素,则使用 $(":header") 即可获得 <h1>Header 1</h1> 与 <h2>Header 2</h2>元素,从而对它们进行操作,可以修改背景,或者字体等。
[ :animated 正在执行动画元素 选择器 ]
没用过这种选择器,API上介绍说是:只有对不在执行动画效果的元素执行一个动画特效。一个页面内,没动画的元素多了去了,如果都执行动画,那不卡死,不过通过这个选择器与其它选择器结合,倒是能执行很多功能。API实例:
<button id="run">Run</button><div></div>
执行如下代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
实现的效果,每1秒钟,不在执行动画的div元素向右移动20像素。
jQuery 层级选择器
一般情况下,通过上面的选择器,灵活的运用,就已经能方便,快捷的找到自己所需的绝大部分的元素了,但是,还有一些特殊情况下,可能通过上面的查找方式不太适合,并且效率上有所欠缺,所以我们还要了解层级选择器的用法,这样才能更方便,更高效的让jQuery为我们服务。
[ 先人 后代选择器 ]
先来看看实例:
<div>
<a href='chengwei2009.blog.163.com' >snail的博客</a>
<span>Snail的博客</span>
<input type='text' name='txtName' value='Snail_博客' />
<a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
</div>
<a href='chengwei2009.blog.163.com' >还是snail的博客</a>
这时,如果这么使用选择器 $("div a")将会选择到
<a href='chengwei2009.blog.163.com' >snail的博客</a> 与 <a href='chengwei2009.blog.163.com' >依然是snail的博客</a>
比起$("a")将所有a标记都选中,范围小了很多,通过这种方式,我们可以选择某类或者某个id区域内的某种或者某个元素,先选中了“先人”,再去找它的“后代”,而不会盲目的查找全文,也是很有用的,比如说清空一个form中的input,如果不使用rest按钮,就可以使用这种方式来进行清除数据。
[ 父 > 子 选择器 ]
定义为:在给定的父元素下匹配所有的子元素。先看一个实例:
<div id ="parent">
<div>小儿子</div>
<div>大儿子
<div>孙子</div>
<div>孙女</div>
</div>
</div>
如果使用:$("#parent > div") 则只会匹配到<div>小儿子</div> 与 <div>大儿子</div> 不会再选择到“孙子”与“孙女”,当然,你要是通过大儿子,再去找孙子,孙女,是另外一回事。
[ 前 + 后 选择器 ]
格式 $("prev + next") 其中prev为:任何有效选择器,next为:一个有效选择器,并且紧跟在着第一个选择器后面,API文档上面的例子:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("label + input"),将得到 <input name="name" /> 与 <input name="newsletter" />
[ 前 ~ 同辈 选择器 ]
格式 $("prev ~ siblings") 其中prev为:任何有效选择器,siblings 一个选择器,并且它作为prev选择器的同辈,API文档例子:
找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用 $("form ~ input")选择器,查找到的结果为:<input name="none" />
还有很多其他的选择器,就不一一列出来了,自己常用的也就是上面那些选择器,而且好像也够用了,不够用的再去API内进行查找。
发表评论
-
jquery easyui dialog的几个使用问题
2014-09-20 11:27 1215jquery easyui dialog可以两种方式使用 1) ... -
easyUi-中文API
2014-09-17 22:51 525一位大神说: EasyUI终于迎来大版本更新了,本次 ... -
给力的jQuery信息提示插件 - Poshy Tip
2013-12-19 22:20 749jQuery 自从出现以来,以其简洁灵活的编程模式迅速流 ... -
jQuery表单美化插件 - Ideal Forms
2013-12-22 09:59 2314Form表单元素的美化一直都是一个比较麻烦的事情,尤其是单 ... -
jQuery实现仿Excel表格编辑功能 - Handsontable-转给力技术
2013-12-18 21:29 19620今天这篇文章要给大家推荐的是一个仿 Excel 表格编辑功 ... -
jQuery文本框字符限制插件 - Textarea Counter
2013-12-18 21:29 906众所周知<textarea>文本框没有类似ma ... -
jQuery文本框智能提示插件-转自给力技术
2013-12-18 21:30 870在网站中使用文本框智能提示功能,能有效的提升用户体验,这 ... -
免费的jQuery用户界面组件包 - Chico UI
2013-12-19 22:20 759Chico UI 是一个开源且免费的用户界面组件库,让 ... -
imgPreview - 实现图片预览功能的jQuery插件
2013-12-18 21:28 3668jQuery以其插件众多、易于使用的特点流行于开发人员中, ... -
(转)jquery each解析数组 json xml
2013-12-16 23:18 970jquery each解析数组: var arr = ... -
js/jquery解析json和数组格式的方法介绍
2013-12-16 23:19 1156在解析之前,我们必须弄清楚几个概念:数组,关联数组以及js ... -
JQuery+JSON+Struts返回一个List到页面
2013-12-16 23:19 596最近有人问我,怎么用JQuery+JSON+Struts实现, ... -
JQuery利用json读取JavaBean List
2013-12-16 23:19 943读取JavaBean 1、一个JavaBean Java代码: ... -
json定义及jquery操作json
2013-12-22 09:59 1261一、背景 json是一种轻量级数据交换格式,非常利于java服 ... -
JQuery ajax json 实例
2013-12-19 22:20 913序列化字符方法:注意 ... -
jquery,each的使用
2013-12-16 23:19 666<!DOCTYPE html PUBLIC " ... -
jquery全选,jquery全不选,jquery反选
2013-12-17 21:39 639<!DOCTYPE html PUBLIC " ... -
jquery 当textarea里内容被清空时,提交按钮禁用?是怎么触发的?
2013-12-22 10:00 1052$(document).ready(function(){ ... -
jquery操作input值总结
2013-12-17 21:41 781获取选中的值 获取一组 ... -
jquery属性禁用 以及dom操作
2013-12-04 22:59 1500<%@ page contentType="t ...
相关推荐
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jquery 学习笔记源码 3jquery常规选择器
第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
Jquery选择器分类整理,基本都包含到了,学习笔记。
该学习笔记带有很不错的DEMO,而且笔记中有比较详细的总结,对于初学者来说,可以根据笔记中的实例训练,达到理解jQuery核心——选择器的目的。
详细而完整的jQuery学习笔记,包含jQuery选择器等
目录 一.JQuery了解 1,原生js的问题 2. JQuery简单介绍 2.1 官方自我介绍: ...三.$()选择器 1.$()选择的结果是一个类数组 2.使用方法(引号问题) 3.文档加载 3.1 [removed]()函数和$(document).re
《jQuery权威指南》学习笔记之第2章 jQuery选择器
学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势 可以简化JavaScript代码 可以像css那样获取元素 可以修改css来控制页面效果 ...
最近在项目中使用jquery,积累了一些api文档中没有的常用筛选方法,包括(基本,层级,简单,内容,可见性,属性,子元素,表单及表单对象属性),希望为大家带去方便
JQuery学习中的笔记。包括内置函数、Dom对象和JQuery对象、选择器和过滤器、隐式迭代等
本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种...
jQuery基本语法 jQuery与DOM对象的转换 jQuery选择器 元素选择器 属性选择器 筛选 操作标签属性 操作css 内容操作 jQuery事件
jQuery验证框架学习笔记,学习jQuery很有帮助。 jQuery验证框架(一) 可选项 jQuery验证框架(二)插件方法 jQuery验证框架(三、四)选择器及实用工具
jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ,动画,ajax 。方便了网页技术的快速发展
jQuery基础 隔行变色的表格 window.onload=function(){ var otable = document.getElementById('oTable');...属性选择器 $("ul li ul li:has(a)").addClass("myClass"); 位置选择器 $("p:lt(2)").addClass("myClass");
帮你了解什么是jQuery,jQuery的特点。...jQuery选择器,DOM对象和jQuery对象的互相转换以及为啥要转换。获取当前元素的其他方法,创建元素的方法。修改元素属性与自定义属性的方法。以及多库共存如何使用。
从jQuery的概述开始,包含jQuery选择器,包装集操作,DOM编程,事件编程,jQuery与ajax集成,常用的工具API,jQuery插件开发,内核研究以及常用插件知识。
使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector)。但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector)[removed]以获取元素内部HTML代码是错误的,正确写法是$...