jQuery入门汇总
jQuery帮助文档
jQuery帮助⽂档jQuery 库 - 特性基础 jQuery 实例jQuery 是⼀个 JavaScript 函数库。
下⾯的例⼦演⽰了 jQuery 的 hidejQuery 库包含以下特性：实例HTML 元素选取 <html>HTML 元素操作 <head>CSS 操作 <script type="text/javaHTML 事件函数 <script type="text/javascrJavaScript 特效和动画 $(document).ready(functionHTML DOM 遍历和修改 $("button").click(functionAJAX $("p").hide();Utilities });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p<p>This is another paragra<button type="button">Clic</body></html>jQuery 语法jQuery 语法是为 HTML 元素的选取编制，可以对元素执⾏某些操作。
基础语法是：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery action() 执⾏对元素的操作实例$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p.test").hide() - 隐藏所有 class="test" 的段落$("#test").hide() - 隐藏所有 id="test" 的元素提⽰：jQuery 使⽤的语法是 XPath 与 CSS 选择器语法的组合。
jQuery课堂笔记(选择器)
jQuery选择器总结jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")层叠选择器：$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器：$("tr:first") 选择所有tr元素的第一个$("tr:last") 选择所有tr元素的最后一个$("input:not(:checked) + span")过滤掉：checked的选择器的所有的input元素$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素$("td:gt(4)") 选择td元素中序号大于4的所有td元素$("td:ll(4)") 选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器：$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组可视化过滤选择器：$("div:hidden") 选择所有的被hidden的div元素$("div:visible") 选择所有的可视化的div元素属性过滤选择器：$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input 元素$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器：$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button$(":text") 选择所有的text input元素$(":password") 选择所有的password input元素$(":radio") 选择所有的radio input元素$(":checkbox") 选择所有的checkbox input元素$(":submit") 选择所有的submit input元素$(":image") 选择所有的image input元素$(":reset") 选择所有的reset input元素$(":button") 选择所有的button input元素$(":file") 选择所有的file input元素$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器：$(":enabled") 选择所有的可操作的表单元素$(":disabled") 选择所有的不可操作的表单元素$(":checked") 选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个 name 为”S_03_22″的input text框的上一个td的text值$(”input[@ name =S_03_22]“).parent().prev().text()名字以”S_”开始，并且不是以”_R”结尾的$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)一个名为 radio_01的radio所选的值$(”input[@ name =radio_01][@checked]“).val();$("A B") 查找A元素下面的所有子节点，包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点例子：找到表单中所有的 input 元素HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。
jQuery教程PPT课件
.ห้องสมุดไป่ตู้
14
元素操作：
• remove() 删除节点 例 jQuery(‘ul li’).remove() 也可在remove() 中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
• empty() 清空节点 jQuery(‘ul li:eq(1)’).empty() 清空第二个li 元素中的内容
注意与基本过滤选择器的区别
.
11
表单过滤选择器
• :enabled 选取所有的可见的元素 • :disabled 选取所有的不可见的元素 • :checked 选取所有的选中的元素(单选框、复选框) • :selected 选取所有的被选中的元素(下拉菜单)
.
12
表单选择器
• :input 选取所有的<input>、<textarea>、<select>、 <button>元素
• 事件冒泡 如果想阻止冒泡的话可以用event.stopPropagation()
• 阻止事件的默认行为 可以采用event.preventDefault() • 如果上面两个都想阻止 可以直接在fn中return false • 事件对象的属性
event.type:获取事件的类型 如click dbclick event.preventDefault():阻止事件的默认行为 event.stopPropagation():阻止事件的冒泡 event.target() 获取触发事件的元素 event.relatedTarget() 获取相关元素
.
8
可见性过滤选择器 • :hidden 选取所有的不可见的元素
jQueryMiniUI快速入门：CRUD（三）
jQuery MiniUI 快速入门：CRUD（三）CRUD包括：查询、编辑、新增、删除等数据操作。
效果图如下：一：创建DataGrid首先，我们创建一个数据表格：<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"allowResize="true" pageSize="20"allowCellEdit="true" allowCellSelect="true" multiSelect="true"><div property="columns"><div type="checkcolumn"></div><div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号<input property="editor" class="mini-textbox"style="width:100%;"/></div><div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别<input property="editor" class="mini-combobox"style="width:100%;" data="Genders"/></div><div field="age" width="100" allowSort="true" >年龄<input property="editor" class="mini-spinner"minValue="0" maxValue="200" value="25" style="width:100%;"/></div><div field="birthday" width="100" allowSort="true"dateFormat="yyyy-MM-dd">出生日期<input property="editor" class="mini-datepicker"style="width:100%;"/></div><div field="remarks" width="120" headerAlign="center"allowSort="true">备注<input property="editor" class="mini-textarea"style="width:100%;" minHeight="80"/></div><div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div></div></div>二：查询记录function search() {var key = document.getElementById("key").value;grid.load({ key: key });}使用load方法，可以传递更多、任意复杂的查询条件。
jQueryLigerUI使用教程入门篇
jQueryLigerUI使⽤教程⼊门篇阅读⽬录获取最新代码jQuery LigerUI 是基于jQuery的⼀系列UI控件组合，简单⽽⼜强⼤，致⼒于快速打造Web前端界⾯解决⽅案。
因为是前端控件，跟服务器⽆关，可以适合.net,jsp,php等等web服务器环境。
⽬前全部插件的打包压缩JS只有100K左右,很轻巧。
使⽤插件式的开发模式，以“简单”为原则的设计，每个插件尽量独⽴，并可依赖拓展。
ligerUI是什么jQuery LigerUI控件丰富，包括基础、导航、布局、表单、表格、树形、窗⼝等基础：Resizable、Drag、Tip导航：Menu、MenuBar、ToolBar布局：Layout、Tab表单：Form、TextBox、Button、CheckBox、ComboBox、DateEditor、Radio、Spinner表格：Grid树形：Tree窗⼝：Dialog、MessageBox、WindowjQuery LigerUI是基于jQuery⽽设计的⼀系列插件集合。
基本上每个插件都是相对独⽴的。
但是彼此之间⼜紧密地关联着，合理地对插件进⾏组装，实现出现各种复杂的功能。
使⽤UI可以帮助你快速地创建友好的⽤户界⾯。
<head><title></title><link href="/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/><script src="/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><script src="/lib/ligerUI/js/core/base.js" type="text/javascript"></script><script src="/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script><script type="text/javascript">$(function (){//我们将⼀个html⽂本框对象转换成ligerui⽂本框对象,并返回ligerui对象var g = $("#txt1").ligerTextBox({//如果没有输⼊时,会提⽰不能为空nullText: '不能为空'});/*如何获取属性*///⽅式⼀alert('⽅式⼀:' + g.get('disabled'));//⽅式⼆alert('⽅式⼆:' + $("#txt1").ligerTextBox('option', 'disabled'));/*如何设置属性*///⽅式⼀g.set('disabled', true);//⽅式⼆$("#txt1").ligerTextBox('option', 'disabled', false);/*如何调⽤⽅法*///⽅式⼀g.setDisabled();//⽅式⼆$("#txt1").ligerTextBox('setEnabled');/*如何设置事件*///这⾥给⽂本框绑定⼀个改变值的事件//也可以设置onChangeValue参数g.bind('changeValue', function (value){alert(value);});});</script></head><body style="padding:10px"><input type="text" id="txt1" value="" style="width:200px"/></body>上⾯是TextBox的使⽤范例，其他的插件使⽤⽅式类似。
JQUERY知识点
J Q U E R Y知识点(总18页) -CAL-FENGHAI.-(YICAI)-Company One1-CAL-本页仅作为文档封面，使用请直接删除基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。
利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。
一起看看以下例子中的选择器：3.$(document).ready(function(){4.5. lick(function(){6.7. alert("You'vejustselectedanimagewhosewidthis600px");8.9. });10.11. lick(function(){12.13. alert("You'vejustselectedanimagewhosewidthisnot600px");14.15. });16.17. ocus(function(){18.19. alert("Thisinputhasanamewhichendswith'email'.");20.21. });22.23.});基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。
jquery教程
JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。
Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。
如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。
Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。
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页。
jQueryGrid入门指南（2）
jQueryGrid⼊门指南（2）上周以为已经把jqgrid 表格这部分已经搞得差不多了，没想到在实际⽤的时候，出现了不少问题，重新把这块知识整理⼀下。
问题⼀：设置表格的⾃动刷新问题的原因： 使⽤表格⾃带的增删改查的功能，编辑完数据后表中数据会刷新。
但是⼿写⽅法修改数据，例如模态框，修改完成后并不会在表中进⾏数据的刷新。
解决的办法： 在请求发送之后，模态框关闭之前使⽤jqgrid的reloadGrid。
$("#jqGrid").trigger("reloadGrid");问题⼆：表中⽇期的显⽰格式问题的原因： 当数据库中的字段是date类型时，直接将数据加载到表格中，显⽰得是⼀串数字，为时间的毫秒值。
解决的办法： 给字段后追加时间转换的⽅法{ label: '⽇期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert }, 编写dateConvert⽅法function dateConvert(cellvalue){var times= new Date(cellvalue) ;date = times.toLocaleString();return date;}问题三：设置表中每⾏交替显⽰样式不同问题的原因： 在设置表格的属性altRows:true 后，表格的样式并没有发⽣改变解决的办法： 在添加altRows:true属性之后，还需要设置altclass来规定需要交替显⽰得样式altRows: true, //设置⾏交替样式altclass: 'differ', //⼿动写的交替的样式.differ{background-color: #DDDDDC;}问题四：表格完成响应式问题的原因： 这个问题本来已经在上⼀篇博客中得到了解决，可是⼜发现了⼀个新的问题，就是当表格的列数⽐较多时，表格中不会出现滚动条，⼿动调整窗⼝⼤⼩时才会出现。
[计算机软件及应用]jquery_基础教程
DOM操作一
对文档一些节点的操作 1.toggleClass():交替的移除和添加类 2.insertBefore()、before()在某元素的前面插入元素
JQuery 入门
2.1 Hello,Jquery！ 例子1： $(function(){ alert("Hello, Jquery!"); }); 页面会直接显示Hello, Jquery!为什么？因为在载入页面的时候 ，因为这个JS在head标签里面，故先会载入js，它就跟我们写 的普通的js类似，直接放在js标签里面。
选择器和事件
例子2：光标的切换 $(function() { $("#orderList li:last").hover(function() { $(this).addClass("red"); }, function() { $(this).removeClass("red"); } ); }); 当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一 个element上生效 见maopao.html
DOM操作二
4. 要用新元素或文本替换每个匹配的元素，使用html()、text()、val()、 attr(); 要移除每个匹配的元素中的元素，使用empty(); 要从文档中移除每个匹配的元素及其后代元素使用remove(); 注意remove和empty的区别 例子：dom.html
JQuery 入门
2、JQuery是怎么工作? 在做所有事情之前,我们要让jQuery读取和处理文档的
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery入门汇总 jQuery入门[1]－构造函数 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">