jQuery学习笔记一(Nora)

合集下载

jquery笔记-jquery语法记

Jquery 语法jQuery 是一个JavaScript 库。

jQuery 极大地简化了JavaScript 编程。

jQuery 使用的语法是XPath 与CSS 选择器语法的组合。

在本教程接下来的章节，您将学习到更多有关选择器的语法。

Jquery 通过$进行选择基础语法：$(selector).action()美元符号定义jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的action() 执行对元素的操作实例:$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有<p> 元素$("p.test").hide() - 隐藏所有class="test" 的<p> 元素$("#test").hide() - 隐藏所有id="test" 的元素文档就绪事件$(document).ready(function(){});或者：$（function（）{}）都表示文档dom 加载完成后执行。

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

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：试图隐藏一个不存在的元素获得未完全加载的图像的大小文档就绪事件$(document).ready(function(){// 开始写 jQuery 代码...});这是为了防止文档在完全加载（就绪）之前运行jQuery 代码，即在DOM 加载完成后才可以对DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：∙试图隐藏一个不存在的元素∙获得未完全加载的图像的大小∙ jQuery 的入口函数是在html 所有标签(DOM)都加载之后，就会去执行。

jQuery学习笔记

jQuery学习笔记1.第二章1.1.控制上下文当前只传给jQuery的$()函数一个参数，但这仅仅是为了在开始的时候尽量保持简单。

事实上，这个函数在接受选择器或者HTML代码作为第一个参数时，还可以接受第二参数。

如果有两个参数，那么第一个参数是选择器，第二参数是指示第一参数的操作上下文（匹配或搜索的范围）。

我们在许多jQuery方法中看到，当第二个可选的参数被忽略时，就会被一个默认的参数所替代。

上下文参数context也就是同样的道理。

默认把DOM树的所有元素作为该选择器上下文。

上下文可以是DOM元素引用，也可以是jQuery选择器的字符串，还可以是DOM元素包装集示例1：$(selector)选择器selector会在整个DOM树上搜索匹配。

示例2：$(selector,"div#sampleDemo")选择器selector会在拥有ID值为sampleDemo的标签div范围内搜索。

示例3：$(selector,$("div#sampleDemo"))效果与示例2相同。

使用$("div#sampleDemo")返回一个DOM元素包装集。

示例3：$(selector,document)使用DOM元素document的引用。

1.2.合并选择元素jQuery允许我们使用逗号操作符将多个选择器合并成一个选择器。

例如，要选择所有<div>和所有<span>元素，可以这么做：$("div,span")1.3.jQuery支持的基础CSS选择器选择器描述示例1.4.通过位置选择元素（CSS支持）有时，需要根据元素在页面上的位置，或者相对于其他元素的位置来选择元素。

可能要选择页面中的第一个链接、隔行段落，或者每个列表中最后一个列表项。

CSS规范将这种类型的选择器称为伪类（pseudo-classes），下表是CSS支持的，但jQuery赋予了它新的名字——过滤器。

JQUERY学习总结

JQUERY学习总结jQuery是一个非常流行的JavaScript库，被广泛应用于Web开发中。

通过使用jQuery，开发者能够简化DOM操作、添加动画效果、处理事件、发送Ajax请求等等。

在学习jQuery的过程中，我总结了以下几个方面的知识。

1.选择器：2.DOM操作：jQuery提供了一系列的方法来操作DOM元素。

例如，通过`html(`和`text(`方法可以获取或者设置元素的内容，通过`append(`和`prepend(`方法可以向元素内部追加内容，通过`addClass(`和`removeClass(`方法可以添加和删除类名。

掌握这些方法可以让我们更加灵活地操作HTML元素。

3.事件处理：jQuery封装了丰富的事件处理方法，如`click(`、`hover(`、`keydown(`等。

通过这些方法，我们可以简化事件绑定和处理的流程。

此外，jQuery还提供了一些特殊的事件方法，比如`on(`和`trigger(`，可以实现事件的动态绑定和触发。

4.动画效果：jQuery可以很方便地为页面添加动画效果，如淡入淡出、滑动、展开收起等。

通过`fadeIn(`、`fadeOut(`、`slideUp(`等方法，我们可以对元素的可见性和位置进行动态控制，增加页面的交互性和美观性。

5. Ajax请求：jQuery内置了强大的Ajax功能，可以实现网页与服务器之间的数据交互。

通过`$.ajax(`方法，我们可以发送HTTP请求并处理响应。

同时，jQuery还提供了一些简化的方法，如`$.get(`和`$.post(`，用于发送GET和POST请求，使我们能够更快捷地进行数据请求和处理。

6.插件扩展：除了以上基本功能，jQuery还支持插件扩展，可以通过引入第三方插件来增强和扩展jQuery的功能。

例如，可以使用jQuery UI插件来创建丰富的用户界面组件，使用jQuery Validation插件验证表单输入等等。

jQuery笔记

JQuery开发工具——GVIM。

锋利的jQuery目录第1章认识jQuery (1)第2章jQuery选择器 (2)第3章jQuery的DOM操作 (5)第4章jQuery中的事件和动画 (8)第5章jQuery对表单、表格的操作及更多应用 (11)第6章jQuery与Ajax的应用 (13)第1章认识jQuery1．jQuery的优势：轻量级；强大的选择器；出色的DOM操作的封装；可靠的事件处理机制；完整的Ajax；不污染顶级变量；出色的浏览器兼容性；链式操作方式；隐式迭代；行为层与结构层的分离；丰富的插件支持；完善的文档；开源。

2．使用jQuery之前，要先导入jQuery库。

Window.onload和$(document).ready()的区别：执行时机：前者必须等待网页中所有的内容加载完毕(包括图片)才能执行；后者在网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。

编写个数：前者只能编写一个function()块，后者能同时编写多个(多个会依次执行)。

简化写法：前者无；后者$(document).ready(function(){//…})可以简写成：$(function(){//…})3. jQuery代码风格。

链式操作风格：$(".has_children").click( function(){$(this).addClass("highlight") //为当前元素增加highlight类.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们的highlight类.children("a").hide(); //将兄弟元素下的<a>元素隐藏});代码规范：1)对于同一个对象不超过3个操作的，可以直接写成一行。

jquery整理的笔记

JQUERY1导入两个js和一个css样式<link rel="stylesheet" href="js/css.css" type="text/css"></link> <script type="text/javascript" src="js/jquery1.4.2.js"></script> <script type="text/javascript"src="js/Validform.js"></script>2jquery会和dwr发生冲突，他们默认都是用$给jquery重新声明<script language="javascript">var j = jQuery.noConflict();</script>3淡入淡出的效果实现<script type="text/javascript">j(function(){j("body").hide(1000);j("body").fadeIn(3000);})</script>显示也可以：j("body").show(3000);4让普通按钮变成submit按钮<input type="button" value="提交" id="su">btnSubmit:"#su"5表单触发事件.registerform表单的styleClass="registerform"Validform:为插件点击按钮为#su就会触发jquery函数（j(function(){})）里面的类容自己要定义datatype等要再这个里面（插件）写如果是定义多个要打逗号不打会出不来效果j(".registerform").Validform()加载时就会调用j(".registerform").Validform({btnSubmit:"#su",datatype:{"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/}});自己定义datetype:{ "c"：符合哪种格式}身份证必须符合这种格式c为上面定义的格式j("#humanIdCard").attr("datatype","c");j("#humanIdCard").attr("errormsg","请输入正确的身份证号码");6验证humanName：是文本框的id属性验证文本框的内容只能是(s2-20)字符2-20个长度j("#humanName").attr("datatype","s2-20");弹出不能为空的信息j("#humanName").attr("nullmsg","姓名不能为空");弹出错误的信息j("#humanName").attr("errormsg","姓名只能在2到20个字符之间");下拉框必须选j("#firstKindId").attr("datatype","select");验证邮箱为：efunction checkEmail(){j("#humanEmail").attr("datatype","e");j("#humanEmail").attr("errormsg","邮箱格式:xx@");if(j("#humanEmail").val()==""){//如果是空的话移除验证j("#humanEmail").removeAttr("datatype");}}Onkeyup:光标放进去再出来时调用验证邮箱的方法Onkeydown: 光标放进去时调用验证邮箱的方法<html:text property="hf.humanEmail" styleId="humanEmail"onkeyup="checkEmail()"/>7拿到下拉框选中的文本，给文本框styleId=firstKindName 赋值拿到文本框的值：j("#firstKindName ").val()j("#firstKindName").val(j("#firstKindId option:selected").text());<html:hidden property="hf.firstKindName" styleId="firstKindName"/>8如果是普通的文本框可以直接这样调用jquery但必须导入那两个文件<input type="text" datetype="s2-20" nullmsg="姓名不能为空" errormsg="姓名只能在2到20个字符之间">9：身份证验证正则表达式"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[ 12][0-9]|3[01])[0-9]{3}[0-9xX]$/10：datatype类型验证email：e验证邮编：p验证字符：s2-10 …其他还可以在写插件时自己定义10动态创建一个div 元素（以及其中的所有内容），并将它追加到body 元素中$("<div><p>Hello</p></div>").appendTo("body");视频教学第一次课：1JQuery实战第一讲：概述、环境准备及入门实例$.get();（$.post()）可以完成和服务器端进行交互三个参数urldatacallbackencodeURI(encodeURI(userName)):处理传过去的参数的中文乱码问题$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){//3.接收服务器端返回的数据，填充到div中$("#result").html(response);});服务器端String userName = URLDecoder.decode(param, "UTF-8");。

jQuery学习总结

jQuery学习总结因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。

在说jQuery之前，不得不提下现在也非常流行的mootools框架。

在网上，很多人把mootools比作java，把jquery比作perl。

我没研究过mootools，也不发表意见，这完全没有意义。

只要本身不存在重大缺陷就可以了。

用好了都强大。

好比Java和.NET争论了这么多年，一样的道理。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助开发的库。

是继prototype之后又一个优秀的JavaScript框架。

它如暴风雪般席卷WEB前端开发，jQuery已确定成为 MVC 和Visual Studio 2008版本中的正式组成部分，诺基亚手机平台Web Run-Time也将纳入jQuery。

所以，请相信，选择jQuery是不会错的。

如果你看到这里还有犹豫，那么我再说个理由，应该能打消你的最后疑虑了。

2009年12月份Tiobe编程语言排行榜JavaScript升到第8名，并且在上升势头最强劲的语言中排名第3位。

我在这里不是想说排行榜的话题，因为那又会引发一场说不完的争论。

我的意思是，排行榜不能说明一切问题，但至少能够说明，现在用哪种语言的人多，人多则说明有活力，相应的其它各种资源也会较丰富。

JavaScript脚本已经深入WEB应用之中。

而作为优秀的JavaScript框架，它的前景不用怀疑。

除非出现一个比jQuery更牛B，更优秀的东东。

我不打算像写教程那样，把jQuery的基础用法都罗列出来，那会很无趣，也没意义。

网上这方面的知识随便搜一下就一大堆。

jquery学习总结(超级详细)

一、选择网页元素jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作”.这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式,放进构造函数jQuery（）（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:$（document)//选择整个文档对象＄(’＃myId’)//选择ID为myId的网页元素$（’div。

myClass')//选择class为myClass的div元素$（’input[name=first］')//选择name属性等于first的input元素也可以是jQuery特有的表达式：＄（'a：first’)//选择网页中第一个a元素$（'tr：odd’)//选择表格的奇数行$(’＃myForm ：input'）//选择表单中的input元素＄('div:visible’) //选择可见的div元素$（'div：gt(2)’)//选择所有的div元素，除了前三个＄（'div:animated'）//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器,可以缩小结果集：* $（’div')。

has（'p’); //选择包含p元素的div元素* $（’div’）。

not（’.myClass’）；//选择class不等于myClass的div元素* $(’div'）。

filter（’.myClass’）；//选择class等于myClass的div元素* ＄(’div’).first(）; //选择第1个div元素＊$('div’)。

eq（5）; //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法:$('div’)。

jquery学习总结(超级详细)

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：$(document)as('p'); ot('.myClass'); ilter('.myClass'); irst(); q(5); ext('p'); arent(); losest('form'); hildren(); iblings(); ind('h3').eq(2).html('Hello');？分解开来，就是下面这样：1. $('div') .find('h3') .eq(2) .html('Hello'); nd()方法，使得结果集可以后退一步：1. $('div')？2. .find('h3')？3. .eq(2)？4. .html('Hello')？5. .end().eq(0).html('World'); nd()：回到最近的一个"破坏性"操作之前。

如果之前没有破坏性操作，则返回一个空集。

所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。

示例描述：选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素HTML 代码:<p><span>Hello</span>,how are you</p>jQuery 代码:$("p").find("span").end()<p><span>Hello</span> how are you</p>-四、元素的操作：取值和赋值操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jquery学习总结(超级详细)

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:＄（document)//选择整个文档对象$（'#myId'）//选择ID为myId的网页元素$('div。

m yClass’)//选择class为myClass的div元素＄('input[name=first]’）//选择name属性等于first的input元素也可以是jQuery特有的表达式:＄('a：first’)//选择网页中第一个a元素$（’tr：odd’）//选择表格的奇数行＄(’#myForm ：input'）//选择表单中的input元素$（’div：visible’) //选择可见的div元素$（'div:gt（2)')//选择所有的div元素,除了前三个＄(’div:animated’)//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：* $（'div').has（’p’）; //选择包含p元素的div元素＊$（’div'）.not('。

myClass'）；//选择class不等于myClass的div元素＊$(’div’）.filter（'.myClass'）; //选择class等于myClass的div元素＊$（’div’).first（); //选择第1个div元素＊$（’div')。

eq(5); //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：$（'div’)。

jquery 笔记

Jquery笔记1.helloworld:$(function(){$("button").click(function(){alert("helloworld");});})2.基本选择器:•改变id 为one 的元素的背景色为# bbffaa•改变class 为mini 的所有元素的背景色为# bbffaa•改变元素名为<div>的所有元素的背景色为# bbffaa•改变所有元素的背景色为# bbffaa•改变所有的<span>元素和id 为two 的元素的背景色为# bbffaa<script type="text/javascript"src="jquery-1.7.2.js"></script ><script type="text/javascript">/* $(function(){//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")//2. 为选择的 jQuery 对象添加onclick响应函数:// $("#btn1").click(function(){}), 响应函数的代码//写在 function(){} 的中括号中.$("#btn1").click(function(){$("#one").css("background", "#ffbbaa");});$("#btn2").click(function(){$(".mini").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div").css("background", "#ffbbaa");});$("*").css("background", "#ffbbaa");});$("#btn5").click(function(){$("span,#two").css("background", "#ffbbaa");});})*/</script>3.层次选择器:<input type="button"value="选择 body 内的所有 div 元素"id="btn1"/><input type="button"value="在 body 内, 选择子元素是 div 的."id="btn2"/><input type="button"value="选择 id 为 one 的下一个 div 元素"id="btn3"/><input type="button"value="选择 id 为 two 的元素后面的所有div 兄弟元素"id="btn4"/><input type="button"value="选择 id 为 two 的元素所有 div 兄弟元素"id="btn5"/><input type="button"value="选择 id 为 one 的下一个 span 元素"id="btn6"/><input type="button"value="选择 id 为 two 的元素前边的所有的div 兄弟元素"id="btn7"/><script type="text/javascript"src="jquery-1.7.2.js"></script> <script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background", "#ffbbaa");});$("#btn2").click(function(){$("body > div").css("background", "#ffbbaa");});$("#one + div").css("background", "#ffbbaa");});$("#btn4").click(function(){$("#two ~ div").css("background", "#ffbbaa");});$("#btn5").click(function(){$("#two").siblings("div").css("background", "#ffbbaa");});$("#btn6").click(function(){//以下选择器选择的是近邻 #one 的 span 元素, 若该span//和 #one 不相邻, 选择器无效.//$("#one + span").css("background", "#ffbbaa");$("#one").nextAll("span:first").css("background","#ffbbaa");});$("#btn7").click(function(){$("#two").prevAll("div").css("background", "#ffbbaa");});})</script>4.基本过滤选择器:<input type="button"value="选择第一个 div 元素"id="btn1"/> <input type="button"value="选择最后一个 div 元素"id="btn2"/><input type="button"value="选择class不为 one 的所有 div 元素"id="btn3"/><input type="button"value="选择索引值为偶数的 div 元素"id="btn4"/><input type="button"value="选择索引值为奇数的 div 元素"id="btn5"/><input type="button"value="选择索引值为大于 3 的 div 元素"id="btn6"/><input type="button"value="选择索引值为等于 3 的 div 元素"id="btn7"/><input type="button"value="选择索引值为小于 3 的 div 元素"id="btn8"/><input type="button"value="选择所有的标题元素"id="btn9"/><input type="button"value="选择当前正在执行动画的所有元素"id="btn10"/><input type="button"value="选择 id 为 two 的下一个 span 元素"id="btn11"/>代码实现:$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();$("#btn1").click(function(){$("div:first").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div:last").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:not(.one)").css("background","#ffbbaa");});$("#btn4").click(function(){$("div:even").css("background", "#ffbbaa");});$("#btn5").click(function(){$("div:odd").css("background", "#ffbbaa");});$("#btn6").click(function(){$("div:gt(3)").css("background", "#ffbbaa");});$("#btn7").click(function(){$("div:eq(3)").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div:lt(3)").css("background", "#ffbbaa");});$("#btn9").click(function(){$(":header").css("background", "#ffbbaa");});$("#btn10").click(function(){$(":animated").css("background", "#ffbbaa");});$("#btn11").click(function(){$("#two").nextAll("span:first").css("background","#ffbbaa");});});5.内容过滤选择器:<script type="text/javascript"src="jquery-1.7.2.js"></script> <script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div:contains('di')").css("background","#ffbbaa");});$("#btn2").click(function(){$("div:empty").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:has(.mini)").css("background","#ffbbaa");});$("#btn4").click(function(){$("div:parent").css("background", "#ffbbaa");//$("div:not(:empty)").css("background","#ffbbaa");});});</script></head><body><input type="button"value="选择含有文本 'di' 的 div 元素"id="btn1"/><input type="button"value="选择不包含子元素(或者文本元素) 的div 空元素"id="btn2"/><input type="button"value="选择含有 class 为 mini 元素的div 元素"id="btn3"/><input type="button"value="选择含有子元素(或者文本元素)的div 元素"id="btn4"/><br><br>6.可见于不可见选择器：<input type="button"value="选取所有可见的 div 元素"id="btn1"> <input type="button"value="选择所有不可见的 div 元素"id="btn2"/><input type="button"value="选择所有不可见的input 元素"id="btn3"/>$(document).ready(function(){$("#btn1").click(function(){$("div:visible").css("background", "#ffbbaa");});$("#btn2").click(function(){//alert($("div:hidden").length);//show(time): 可以使不可见的元素变为可见, time 表示时间, 以//毫秒为单位//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该//方法的 jQuery 对象: 可以继续调用该对象的其他方法.$("div:hidden").show(2000).css("background","#ffbbaa");});$("#btn3").click(function(){//val() 方法可以返回某一个表单元素的 value 属性值.alert($("input:hidden").val());});7.属性过滤选择器：<input type="button"value="选取含有属性title 的div元素."id="btn1"/><input type="button"value="选取属性title值等于'test'的div元素."id="btn2"/><input type="button"value="选取属性title值不等于'test'的div 元素(没有属性title的也将被选中)."id="btn3"/><input type="button"value="选取属性title值以'te'开始的div元素."id="btn4"/><input type="button"value="选取属性title值以'est'结束的div 元素."id="btn5"/><input type="button"value="选取属性title值含有'es'的div元素."id="btn6"/><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素."id="btn7"/><input type="button"value="选取含有 title 属性值, 且title 属性值不等于 test 的 div 元素."id="btn8"/>$("#btn1").click(function(){$("div[title]").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div[title='test']").css("background","#ffbbaa");});$("#btn3").click(function(){//选取的元素中包含没有 title 的 div 元素.$("div[title!='test']").css("background","#ffbbaa");});$("#btn4").click(function(){$("div[title^='te']").css("background","#ffbbaa");});$("#btn5").click(function(){$("div[title$='est']").css("background","#ffbbaa");});$("#btn6").click(function(){$("div[title*='es']").css("background","#ffbbaa");});$("#btn7").click(function(){$("div[id][title*='es']").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div[title][title!='test']").css("background", "#ffbbaa");});8.子元素选择器：代码实现：$(document).ready(function(){$("#btn1").click(function(){//选取子元素, 需要在选择器前添加一个空格.$("div.one :nth-child(2)").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div.one :first-child").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div.one :last-child").css("background","#ffbbaa");});$("#btn4").click(function(){$("div.one :only-child").css("background","#ffbbaa");});});</script></head><body><input type="button"value="选取每个class为one的div父元素下的第2个子元素."id="btn1"/><input type="button"value="选取每个class为one的div父元素下的第一个子元素."id="btn2"/><input type="button"value="选取每个class为one的div父元素下的最后一个子元素."id="btn3"/><input type="button"value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素."id="btn4"/>9.表单元素过滤选择器：代码实现：$(function(){$("#btn1").click(function(){//使所有的可用的单行文本框的 value 值变为尚硅谷alert($(":text:enabled").val());$(":text:enabled").val("尚硅谷");});$("#btn2").click(function(){$(":text:disabled").val("");});$("#btn3").click(function(){var num =$(":checkbox[name='newsletter']:checked").length;alert(num);});$("#btn5").click(function(){//实际被选择的不是 select, 而是 select 的 option 子节点//所以要加一个空格.//varlen = $("select :selected").length//alert(len);//因为 $("select :selected") 选择的是一个数组//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.//alert($("select :selected").val());//jQuery 对象遍历的方式使 each, 在 each 内部的this 是正在//得到的 DOM 对象, 而不是一个 jQuery 对象$("select :selected").each(function(){alert(this.value);});});$("#btn4").click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);});});})<h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内可用input 赋值操作.</button><button id="btn2">对表单内不可用input 赋值操作.</button><br/><br/><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br/><br/> <button id="btn5">获取下拉框选中的内容.</button><br/><br/>10.节点的插入//测试使用 jQuery 操作文本节点, 属性节点.//及查找元素节点$(function(){//1. 操作文本节点: 通过 jQuery 对象的 text() 方法alert($("#bj").text());$("#bj").text("尚硅谷");alert($(":text[name='username']").attr("value"));//2. 操作属性节点: 通过 jQuery 对象的attr() 方法.//注: 直接操作 value 属性值可以使用更便捷的val() 方法.alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value", "尚硅谷");})$("<li id='laiwu'>莱芜</li>").appendTo($("#city"));$("<li id='xian'>西安</li>").insertBefore("#bj");$("#rl").after($("<li id='xian'>西安</li>"));主要方法如下：11.节点的包装:$(function(){//包装 li 本身$("#game li").wrap("<font color='red'></font>");//包装所有的 li$("#city li").wrapAll("<font color='red'></font>");//包装 li 里边的文字.$("#language li").wrapInner("<fontcolor='red'></font>");})12.html方法和val()方法;$(function(){//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数$(":text").focus(function(){//2. 当获取焦点时, 若 #address 中是默认值//(defaultValue属性, 该属性是 DOM 对象的属性), 就使其值置为 ""var val = $(this).val();if(val == this.defaultValue){$(this).val("");}}).blur(function(){//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""//则为其恢复默认值.var val = this.value;if($.trim(val) == ""){this.value = this.defaultValue;}});//2.$(":button:eq(1)").click(function(){$("#single").val("选择3号");});$(":button:eq(2)").click(function(){$("#multiple").val(["选择2号", "选择4号"]);});$(":button:eq(3)").click(function(){$(":checkbox[name='c']").val(["check2", "check4"]);});$(":button:eq(4)").click(function(){//即便是为一组 radio 赋值, val参数中也应该使用数组.//使用一个值不起作用。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JQuery学习笔记早半年前就看过jQuery的相关资料，也试着学过点，用过一点，但没有深入的系统的学习过这个js 框架，现在准备学习一下JQuery，从今天算起吧。

Jquery学习1---关于Jquery:JQuery是一个js框架，集成了javascript、Dom、XmlHttpRequest等。

是由John Resig在2006年创建的。

看来编程界也是人才辈出啊。

在使用JQuery之前，需要下载JQuery技术框架文件。

下载地址去官方网站：/最新版本好像是1.7了，下载压缩后的吧，小一些，也就不到100kb，是一个js文件。

然后还需要将下载的jquery文件引入到页面中才可以使用。

引入代码（方法）如下：<script type="text/javascript" src="jquery文件的地址（相对）"></script>看我的文件结构如下：我使用的是1.7版本的。

相对应的引入方式<script type="text/javascript" src="js/jquery-1.7.min.js"></script>下面就可以在该页面中使用该文件了，也就是可以使用Jquery了。

哈哈Jquery学习2----关于JQuery构造器构造器是JQuery框架的核心，其有jQuery()函数来实现（也可简写为$(),所以一般情况下使用后者）,此函数是JQuery的核心，jquery的一切操作都会构建在这个函数之上。

注意：使用jQuery()这种格式的时候，jQuery这个单词要写对，就Q需要大写，其他要小写，错一个字母都不可以。

jQuery()函数可以接受四种类型的参数：第一：jQuery(html):根据html标记字符串，动态的创建由jquery包含的Dom元素假设现在我们的html文件的<body>标签里什么都没有，我们使用jquery向body标签中添加一个div，并且div中的内容是“这是添加的一个div，哈哈”。

代码：<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" language="javascript" src="js/jquery-1.7.min.js"></script><title>无标题文档</title></head><body><script type="text/javascript" language="javascript">$("<div>这是添加的一个div，哈哈。

</div>").appendTo("body");</script></body></html>打开浏览器，显示效果如下：同样的上面的这一句：$("<div>这是添加的一个div，哈哈。

</div>").appendTo("body");可以改为：jQuery("<div>这是添加的一个div，哈哈。

</div>").appendTo("body");显示效果是一模一样的。

第二：jQuery(elements):这个参数的函数可以将dom对象转换成jQuery对象，然后调用Jquery对象的属性和方法来控制该dom元素的样式。

下面的示例代码就是将上面div中的内容的颜色改为红色，大小改为24px；var div = $("div");div.css("color","red");div.css("font-size","24px");测试结果截图：第三：jQuery(callback):它是$(document).ready()的缩写，表示绑定一个在dom文档加载完毕后要执行的函数。

下面的代码示例分别用上面的两种写法来执行两个函数，弹出两个提示框。

$(document).ready(function(){alert("先执行吧！");});$(function(){alert("这是页面加载完毕后执行的函数！");});测试执行截图：第四：jQuery(expression,[context]):根据css选择器字符串在页面中匹配元素，或者使用context参数指定匹配的范围。

下面的示例代码是将页面的p标签中的span标签中的内容的颜色设置成红色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="js/jquery-1.7.min.js"></script></head><body><div><span>文本块1</span></div><p><span>文本块2</span></p><script language="javascript" type="text/javascript">//var red = $("span","p");var red = jQuery("p span");red.css("color","red");</script></body></html>测试截图：Jquery学习3---关于jQuery对象和Dom对象Jquery对象和Dom对象是两个不同的概念，因此两者不能相互的调用。

dom对象调用的是dom组件和javascript定义的方法和属性，而jquery对象只能调用jquery定义的方法和属性，因此一定要明白对象的类型，然后调用该对象类型所具有的方法和属性。

当然了，虽然两者概念不同，不是同类型的对象，但是可以相互转换。

1.dom对象转换为jquery对象dom对象转换为jquery对象使用的是jQuery()函数，例如var domObj = document.getElementsByTagName(“span”)[0];此时domObj就是一个Dom对象，指向的是网页中第一个span标签这个dom对象。

Var jqueryObj = $(domObj);或者var jqueryObj = jQuery(domObj);此时使用jQuery()；函数就将domObj这个DOM对象转换成了jqueryObj这个jquery对象。

此时就可以使用该对象调用jquery定义的方法和属性来定义span这个元素的显示样式了。

2.jquery对象转换为DOM对象jQuery对象实际上就是一个javascript数据集合，因此要得到Dom对象，那么就可以从jquery 对象中选取某一个元素，获得的这个元素就是一个dom对象，然后就可以使用dom对象来操作html了。

方法一：对于上面的jqueryObj，使用var spanObj =jqueryObj [0];就将jquery对象转化为了dom对象。

例如：Body里的内容如下：<div><span>文本块1</span></div><p><span>文本块2</span></p>Javascript代码：<script language="javascript" type="text/javascript">var domObj = document.getElementsByTagName("span")[0];var jqueryObj = $(domObj);var domobj = jqueryObj[0];domobj.style.color='blue';</script>效果图如下：方法二：使用jquery对象的get()方法也可以实现同样的效果。

上面记得，jquery对象是javascript数据集合，要访问里面的元素，可以使用索引值，也可以使用jquery 对象的方法，下面就是访问jquery对象的常用的几个方法。