jQuery入门教程(很不错)
jquery使用方法
jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。
据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。
微软公司甚⾄把jQuery作为他们的官⽅库。
对于⽹页开发者来说，学会jQuery是必要的。
因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。
这是它区别于其他函数库的根本特点。
使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。
jQuery基础入门ppt
jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选 元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删 除. 这个方法的返回值是一个指向已被删除 的节点的引用. empty(): 清空节点 – 清空元素中的所有后 代节点(不包含属性节点).
创建节点和插入节点示例 var newP =$("<p>武广高速铁路即将通车！ </p>"); newP.insertAfter(―#chapter‖); //将创建的newP元 素插入到ID为#chapter的元素之后 或者 newP.appendTo(―body‖); //插入到body元素里
内容过滤选择器示例
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素(或者文本元素) 的 div 空 元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景 色为 # bbffaa $("p:has(.mini)") 改变含有子元素(或者文本元素)的div元素 的背景色为 # bbffaa
jq常用方法
jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。
在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。
1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。
- $(".class")：根据class选择元素。
- $("tag")：根据标签名选择元素。
- $("element").find(selector)：在指定元素中查找符合条件的元素。
2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。
常用的事件有：- $(selector).click(function(){})：点击元素触发事件。
- $(selector).mouseover(function(){})：鼠标移上元素触发事件。
- $(selector).submit(function(){})：表单提交触发事件。
- $(selector).focus(function(){})：元素获得焦点触发事件。
3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。
- $(selector).text()：获取或设置元素的文本内容。
- $(selector).attr()：获取或设置元素的属性。
- $(selector).addClass()：为元素添加class。
- $(selector).remove()：删除指定元素。
4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。
菜鸟教程jquery语法
菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。
本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。
1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。
以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。
以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。
以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。
以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。
jq常用方法
jq常用方法1.选择器：使用$()函数选择HTML文档中的元素，例如$('#id')、$('.class')、$('element')等。
2.事件处理：使用on()函数添加事件处理程序，例如$('element').on('click',function(){...})。
3.属性操作：使用attr()函数获取或设置元素的属性，例如$('element').attr('name','value')。
4.CSS操作：使用css()函数获取或设置元素的CSS属性，例如$('element').css('color','red')。
5.DOM操作：使用append()、prepend()、after()、before()等函数插入或移动HTML元素，例如$('element').append('<div>...</div>')。
6.遍历：使用each()函数遍历匹配的元素，例如$('element').each(function(){...})。
7. AJAX操作：使用$.ajax()函数向服务器发送请求，例如$.ajax({type:'POST',url:'url',data:{...},success:function() {...},error:function(){...}})。
8. 动画效果：使用animate()函数实现元素的动画效果，例如$('element').animate({property:value},speed,function(){...} )。
9. 数据缓存：使用data()函数在元素上存储数据，例如$('element').data('name','value')。
jquery定义方法
jquery定义方法如何使用jQuery定义方法jQuery是一款流行的JavaScript库，它提供了许多有用的方法和函数，使得JavaScript的编写变得更加方便和高效。
在jQuery中，我们可以定义自己的方法，这些方法可以像jQuery内置方法一样使用。
下面，我们将介绍如何使用jQuery定义方法。
使用jQuery定义方法非常简单，我们只需要使用$.fn.extend()方法即可。
这个方法接受一个对象作为参数，这个对象包含我们要定义的方法。
例如，我们要定义一个名为test的方法，可以这样写：$.fn.extend({test: function() {// 方法逻辑}});这个方法可以被任何jQuery对象调用，例如：$('div').test();这将在所有div元素上调用test方法。
方法参数当我们定义方法时，我们可以为方法指定参数。
参数可以是任何类型的值，例如字符串、数字、对象等。
在方法中，我们可以通过参数来控制方法的行为。
例如，我们可以定义一个名为highlight的方法，用于将元素的背景颜色设置为黄色。
我们可以将要高亮的元素作为方法的参数，例如：$.fn.extend({highlight: function(color) {return this.css('background-color', color);}});在这个方法中，我们将背景颜色设置为方法的参数color。
这个方法可以这样调用：$('div').highlight('yellow');这将在所有div元素上调用highlight方法，将它们的背景颜色设置为黄色。
方法链在jQuery中，方法链是一种非常有用的编码模式。
方法链允许我们在一个jQuery对象上执行多个方法，而不需要创建多个中间变量。
在方法链中，每个方法返回的是一个jQuery对象，这个对象可以用于链式调用下一个方法。
《jq》(完美精品课件
《jq》(完美精品课件一、教学内容本节课我们将深入学习《jq》教材的第3章“事件处理”和第4章“动画效果”。
具体内容包括：事件处理的基本概念、常用事件类型及其使用方法；动画效果的分类、实现原理以及常用动画函数的运用。
二、教学目标1. 理解并掌握事件处理的基本概念和常用事件类型。
2. 学会使用动画效果，能够实现页面元素的动态展示。
3. 培养学生的动手实践能力和问题解决能力。
三、教学难点与重点教学难点：事件处理机制的理解，动画效果的实现原理。
教学重点：常用事件类型的运用，动画函数的使用。
四、教具与学具准备1. 教具：计算机、投影仪、黑板。
2. 学具：教材、笔记本电脑、网络。
五、教学过程1. 导入：通过展示一个实践情景（如：一个动态变化的菜单），引发学生对事件处理和动画效果的兴趣。
2. 知识讲解：1) 事件处理：介绍事件处理的基本概念，讲解常用事件类型（如：click、mouseover、mouseout等）及其使用方法。
2) 动画效果：介绍动画效果的分类（如：淡入淡出、滑动、缩放等），讲解动画效果的实现原理以及常用动画函数（如：slideDown、slideUp、fadeIn、fadeOut等）的运用。
3. 例题讲解：结合实践情景，演示如何使用事件处理和动画效果制作一个动态菜单。
4. 随堂练习：让学生分组练习，每组制作一个具有不同动画效果的页面元素。
六、板书设计1. 事件处理：基本概念常用事件类型2. 动画效果：分类实现原理常用动画函数七、作业设计1. 作业题目：制作一个具有动画效果的轮播图。
2. 答案：1) HTML结构：<div class="carousel"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>2) CSS样式：.carousel {width: 300px;height: 200px;overflow: hidden;}.carousel ul {position: relative;}.carousel li {position: absolute;left: 300px;width: 300px;height: 200px;backgroundcolor: f0f0f0; textalign: center;lineheight: 200px;}3) JavaScript代码：$(document).ready(function() { var index = 0;var timer;function playCarousel() {clearTimeout(timer);$('.carousel ulli').eq(index).stop().animate({'left': 0},500).siblings().stop().animate({'left': 300}, 500);index++;if (index >= 4) {index = 0;}timer = setTimeout(playCarousel, 2000);}playCarousel();$('.carousel').mouseover(function() {clearTimeout(timer);});$('.carousel').mouseout(function() {playCarousel();});});八、课后反思及拓展延伸1. 反思：本节课学生对事件处理和动画效果的理解程度，以及实践操作中遇到的问题。
5个jquery经典入门教程推荐
5个jquery经典入门教程推荐
jquery是一个迅速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，在我们日常的想不开发中，可以帮我们优化HTML文档操作，大事处理，以及动画设计和AJAX交互，只需要少量的代码，即可将它们集成到网站上，并且能够协助拜访者共享网站上的内容，大大提高了我们开发效率，那么我们今日给大家介绍几个jquery入门教程，包含jquery入门视频教程，在线手册以及jquery代码等相关教程。
一、jquery视频教程：
1.《极客学院jquery零基础入门视频教程》
《极客学院jquery零基础入门视频教程》从基础彻低讲解，主要包括以下内容： 1，jQuery挑选器 2，jQuery大事 3，jQuery Dom操作 4，jQuery动画 4，jQuery与ajax 5，实例实战
2.《李炎恢jquery基础视频教程》
jQuery是一个迅速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是write Less，Do More，即提倡写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、大事处理、动画设计和Ajax交互。
二、jquery在线手册：
第1页共2页。
jQuery的起点教程(PDF版)
以下部分为原文翻译:jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。
它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。
这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
内容提要Hello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function(){//do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function(){$("a").click(function(){alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。
)让我们看一下这些修改是什么含义。
$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQuery object)。
函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.这里有一个拟行相似功能的代码:<a href="#"onclick="alert('Hello world')">Link</a>不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.下面我们会更多地了解到选择器与事件.本章的相关链接:Find me:使用选择器和事件jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div>ul a")）；第二种是用jQuery对象的几个methods(方法)。
JQuery核心用法
讲座内容
1、jQuery是什么 、 是什么 2、jQuery核心函数 、 核心函数 3、jQuery对象访问 、 对象访问 4、jQuery选择器使用 、 选择器使用 5、 jQuery属性的使用 、 属性的使用 6、jQuery筛选 、 筛选
官方解释： 官方解释： jQuery是一个以前未曾有过的 是一个以前未曾有过的JavaScript库。 是一个以前未曾有过的 库 他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添 文档、 他快速、简洁，能够很轻易地处理 文档 控制事件、 加动画和Ajax效果。 效果。 加动画和 效果 jQuery是为了改变 是为了改变JavaScript的编写方式而设计的。 的编写方式而设计的。 是为了改变 的编写方式而设计的 他适合所有人：设计师、开发人员、极客、商业应用... 他适合所有人：设计师、开发人员、极客、商业应用 体积小： 压缩版）， 精简版）， 体积小：26.5KB（1.2.1压缩版）， （ 压缩版），45.3KB（1.2.1精简版）， （ 精简版 78.6KB（1.2.1完整版）...20.7KB（1.1.2压缩版）， 完整版） 压缩版）， （ 完整版 （ 压缩版），57.9KB（1.1.2 （ 完整版） 完整版） 兼容性：支持CSS 1-3和基本的 和基本的XPath 兼容性：支持 和基本的 跨浏览器： 跨浏览器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容） （向后兼容）
对象， 函数。 如果你想得到 jQuery对象，可以使用 $(this) 函数。 对象 jQuery 代码 代码: $("img").each(function(){ $(this).toggleClass("example"); });
jquery的初始化方法
jQuery的初始化方法介绍jQuery是一个功能强大且易于使用的JavaScript库，常用于开发Web应用程序。
在使用jQuery之前，我们需要进行初始化设置以确保正确使用该库的各种功能。
本文将详细介绍jQuery的初始化方法，包括引入jQuery库、创建文档就绪函数和简化代码的方法等。
引入jQuery库在使用jQuery之前，首先需要引入jQuery库文件。
在项目中，可以通过以下两种方式引入jQuery：1.下载并引入本地文件：可以从[jQuery官网](上下载最新的jQuery库文件，然后将其保存到项目目录中，并通过<script>标签引入到HTML文件中。
2.使用CDN引入：可以使用CDN（内容分发网络）来引入jQuery库，这样可以提高页面加载速度并减少网络流量。
在HTML文件中，可以使用以下代码引入CDN：<script src=""></script>创建文档就绪函数文档就绪函数是在页面的DOM结构加载完毕后执行的函数，用于确保JavaScript代码在操作页面元素之前能正确获取到它们。
在jQuery中，可以使用$(document).ready()方法来创建文档就绪函数。
下面是一个基本的文档就绪函数示例：$(document).ready(function(){// 在这里编写你的代码});文档就绪函数也可以使用简化的语法来写，如下所示：$(function(){// 在这里编写你的代码});简化代码的方法jQuery提供了许多便捷方法来简化常见的操作，例如选择元素、处理事件、创建动画等。
以下是几种常用的简化代码的方法：选择元素jQuery提供了强大的选择器功能，可以通过多种方式选择HTML元素。
通过选择器，可以快速定位到所需的元素，并对其进行操作。
以下是一些常用的选择器示例：•通过ID选择器选取元素：$("#id")•通过类名选择器选取元素：$(".class")•通过标签名选择器选取元素：$("tag")•通过属性选择器选取元素：$("[attribute]")•通过多个选择器选择元素：$("selector1, selector2")处理事件在jQuery中，可以使用$(selector).event()方法为选定的元素绑定事件。
jQuery简单学习手册
jQuery简单学习手册由于现在各种浏览器越来越多，客户使用的浏览器也是五花八门，大家在开发时自己手工写的JS可能会存在各种兼容性问题，为了节省时间同时能有更人性化的操作体验(列如其中的ui插件就提供了非常多的功能)，所以推荐在开发时使用jQuery，根据官方文档上的说明它兼容IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+等浏览器，同时它将一些常用的操作都封装到了框架中，节省写代码时间并不用考虑兼容性。
目前CEMIS中集成的jQuery版本为1.7.2，jQuery UI版本为1.8jQuery可以用美元符$或jQuery来写，但由于CEMIS中有另一款类库prototype也是使用$，为了避免$对象冲突，所以在cemis中都使用jQuery（注意大小写）。
以下是我在开发中常用到的一些功能，分享给大家：◆jQuery框架⏹选择器◆根据ID匹配一个元素：<div id=”test”></div>jQuery(“#test”);◆根据类匹配元素：<div class=”test”>1</div>,<div class=”test”>3</div>jQuery(“.test”);◆匹配所有不可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:hidden");将匹配<div style=”display:none”>1</div>◆匹配所有可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:visible");将匹配<div>2</div>◆匹配给定的属性是某个特定值的元素：<input type=”checkbox”name=”test1”value=”1”/>,<input type=”checkbox”name=”test1” value=”2” />,<input type=”checkbox” name=”test2” value=”1” />jQuery ("input[name=' test2']").attr("checked", true);即能选中第3个复选框⏹属性◆取得一个匹配元素的属性值：<img id=”test” src=”1.jpg” />jQuery(“#test”).attr(“src”);或jQuery(“img”).attr(“src”);最后获取的值为1.jpg◆为匹配元素设置一个属性值：<img id=”test” />jQuery(“#test”).arrt(“src”, “1.jpg”);结果为<img id=”test” src=”1.jpg” />◆为匹配元素设置多个属性值：<img id=”test” />jQuery("#test").attr({ src: "1.jpg", alt: "测试" });结果为<img id=”test” src=”1.jpg” alt=”测试” />◆从匹配元素删除属性：<img id=”test” src=”1.jpg” alt=”测试” />jQuery("#test").removeAttr("alt");结果为<img id=”test” src=”1.jpg” />◆为每个匹配的元素添加指定的类名：<div id=”test”>1</div>jQuery(“#test”). addClass("myclass");结果为<div id=”test” class=” myclass”>1</div>◆从所有匹配的元素中删除全部或者指定的类：<div id=”test” class=” myclass”>1</div>jQuery(“#test”). removeClass(“myclass”)或jQuery(“#test”). removeClass();结果为<div id=”test”>1</div>◆取得第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html();结果为<span> div1</span>◆设置第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html(“a”);结果为<div id="test">a</div>,<div id="test">div2</div>◆设置所有匹配元素的html内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“div”).html(“aa”);结果为<div id="test">aa</div>,<div id="test">aa</div>◆取得一个或所有匹配元素的文本内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).text();或jQuery(“div”).text();结果为div1或div1div2设置文本内容与前面的设置html类似，使用text(“xx”)的方式。
jquery的使用方法
jquery的使用方法jQuery作为一种常用的JavaScript库，其强大的功能和简化代码的方便性让其成为前端开发者中的首选。
以下是在项目中常见的jQuery使用方法的分步骤阐述：1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库，通常我们是从官网下载一个jquery-x.x.x.js文件，在引用时需要写正确的路径。
2. jQuery对象的创建要使用jQuery对象，首先需要用jQuery构造函数来创建一个jQuery对象。
这可以使用两种方式创建：1）通过$或jQuery函数创建：例如：$("选择器")或者jQuery("选择器")；2）通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。
3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器，也支持自定义选择器。
与CSS选择器类似，jQuery选择器是用于选择HTML元素的字符串。
例如：选择id为“content”的元素：$("#content")；选择class为“box”的元素：$(".box")；选择label元素中“for”属性值为“id”的元素：$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件，例如：$(selector).bind(event,function)绑定事件。
事件可以是click、dblclick、mouseenter等等，函数可以是已定义的函数名，也可以是匿名函数。
5. 样式的操作通过jQuery对象的css()方法设置样式。
例如：$(selector).css('color','#fff')设置字体颜色为白色，$(selector).addClass('className')增加类名为'className'的样式。
JQuery入门、手册及教程
浅谈JQUREY（摘自/softwave/article/details/2070815）JQUERY手册（第七页，附教程）Jquery是继prototype之后又一个优秀的Javascript框架。
对prototype我使用不多，简单了解过。
但使用上jquery 之后，马上被她的优雅吸引住了。
有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。
使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。
没错，jquery也跟风了。
为达到document.getElementById()的目的，jquery是这样写的：Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#，好，看看下面的用法：Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。
jQuery基础教程
jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。
jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。
jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。
学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。
但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。
jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。
js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。
jQuery完全手册
jQuery完全手册jQuery是一种流行的JavaScript库，它允许开发者以更简单的方式对HTML文档进行操作。
jQuery提供了许多有用的功能，比如DOM操作、事件处理、动画效果等等。
本文将介绍jQuery的完整手册，包括其语法、文档对象模型、事件和效果。
一、语法jQuery语法非常简单，并且易学易用。
它是基于CSS选择器的，可以通过选中所有类似文本的元素来实现功能。
例如：$(document).ready(function(){$(\"button\").click(function(){$(\"p\").hide();});});上面的代码意思是，当文档加载完毕时执行一个函数，然后当按钮被点击时隐藏所有段落元素。
几个重要的jQuery语法如下：1. $(selector).action()：这是最基本的语句，它为jQuery选择器选择元素，并对它们执行某个操作。
2. $(document).ready(function(){})：这个语句表示文档已经加载完毕，可以执行代码了。
3. $(this)：这个语句用于获取当前元素。
4. $(selector).each(function(){})：这个语句用于迭代一个选择器匹配的元素集合，并为每个元素执行一个函数。
二、文档对象模型jQuery有一个强大的文档对象模型，可以使您轻松地遍历和操作HTML元素和属性。
在jQuery中，文档对象模型由以下内容组成：1. 选择器：通过选择器可以选择文档中的元素，其语法类似于CSS选择器。
2. 属性操作：设置和获取元素的属性值。
3. 样式操作：设置和获取元素的样式。
4. HTML操作：可以操作元素的HTML内容。
5. 文本操作：可以操作元素的文本内容。
三、事件jQuery还提供了一系列用于处理事件的方法。
借助事件处理程序，可以在元素上定义事件，比如点击事件、鼠标悬停事件等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。
DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。
"ul>li:first"中ul>li表示所有位于ul下的li元素（为CSS表达式，XPath方式可用ul/li），:first表示其中的第一个。
addClass()为jQuery对象用来添加CSS样式类的函数，相反的函数为removeClass()。
再加入以下代码：$('ul').append($('new item '));运行效果如下：其中$('new item')将其中的字符串转换为DOM对象，然后通过append()函数加入ul对象的最后。
接下来：$(document).ready(function(){$('ul').css('color','red');});则效果如：jQuery构造函数中还可以真接传入DOM对象，如document，或jQuery对象（当然就没什么意义）。
ready()函数为document添加事件处理函数，将ul的颜色设为红色。
$(document).ready()由于应用场景众多，所以可以直接用$(fn)来代替，fn表示处理函数。
（ready处理函数貌似在文档内容载入完成后执行，无需等待相关其它图片等资源载入完成，所以比load事件要更早执行，对于这点，没有具体证实）$(function(){alert('welcome to jQuery');});以上代码的效果是页面一载入，就弹出一个对话框。
jQuery1.2选择器jQuery1.2选择器以下的文档根据官网1.2选择器汉化，并做相应的调整及加入了部份示例。
由于实际使用中选择器在IE和非IE下会有不同的效果，请参照红色的字样。
如有错误请及时联系我。
绯雨汉化：/基本选择器#myid返回:对象>匹配一个id为myid的元素。
element返回:对象>数组匹配所有的element元素.myclass返回:对象>数组匹配所有class为myclass的元素*返回:对象>数组匹配所有元素。
该选择器会选择文档中所有的元素，包括html，head，bodyselector1,selector2,selectorN返回:对象>数组匹配所有满足selector1或selector2或selectorN的元素层次选择elementParent elementChild返回:对象>数组匹配elementParent下的所有子元素elementChild。
例如：$("div p")选择所有div下的p 元素elementParent > elementChild返回:对象>数组匹配elementParent下的子元素elementChild。
例如：$("div>p")选择所有上级元素为div 的p元素prev+next返回:对象>数组匹配prev同级之后紧邻的元素next。
例如：$("h1+div")选择所有div同级之前为h1的元素（）prev ~ siblings返回:对象>数组匹配prev同级之后的元素siblings。
例如：$("h1~div")可以匹配（)基本滤镜:first返回:对象>匹配第一个元素:last返回:对象>匹配最后一个元素:not(selector)返回:对象>数组匹配不满足selector的元素:has(selector)返回:对象>数组匹配包含满足selector的元素。
此选择器为1.2新增:even返回:对象>数组从匹配的元素集中取序数为偶数的元素。
:odd返回:对象>数组从匹配的元素集中取序数为奇数的元素。
:eq(index)返回:对象>数组从匹配的元素集中取第index个元素:gt(index)返回:对象>数组从匹配的元素中取序数大于index的元素:lt(index)返回:对象>数组从匹配的元素中取序数小于index的元素:header返回:对象>数组匹配所有的标题元素，例如h1，h2，h3……hN。
此选择器为1.2新增:animated返回:对象>数组匹配正在执行动画的元素。
此选择器为1.2新增:empty返回:对象>数组匹配所有没有子元素（包括文本内容）的元素:parent返回:对象>数组匹配包含子元素（包含文本内容）的所有元素:contains(text)返回:对象>数组匹配所有含有text的元素:hidden返回:对象>数组匹配所有隐藏的元素，包含属性type值为hidden的元素:visible返回:对象>数组匹配所有非隐藏的元素子元素滤镜E:nth-child(index/even/odd/equation)返回:对象>数组匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。
注：下标从1开始E:first-child返回:对象>数组匹配所有E在其父元素下是第一个子元素的集合。
例如：HTML（"），使用$("p:first-child")，选取：E:last-child返回:对象>数组匹配所有E在其父元素下是最后一个子元素的集合。
例如：同上的HTML，使用$("p:last-child")，选取：E:only-child返回:对象>数组匹配所有E是其父元素的唯一子元素的集合。
例如：同上的HTML，使用$("p:only-child")，选取：表单滤镜:input返回:对象>数组匹配所有的input、textarea、select、button:text返回:对象>数组匹配文本域。
注：在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素:password返回:对象>数组匹配密码域。
注：在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素:radio返回:对象>数组匹配单选按钮。
注：在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE 浏览器下，选择的对象是input元素type属性为radio的元素:checkbox返回:对象>数组匹配复选框。
注：在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素:submit返回:对象>数组匹配提交按钮。
注：在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE 浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素:image返回:对象>数组匹配图像域。
注：在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素:reset返回:对象>数组匹配重置按钮。
注：在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE 浏览器下，选择的对象是input或button元素type属性为reset的元素:button返回:对象>数组匹配按钮。
注：在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素:file返回:对象>数组匹配文件域。