Jquery使用手册1--核心部份
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使用流程
jquery使用流程jQuery使用概述•jQuery是一个快速、简洁的JavaScript库•它简化了HTML的文档遍历、事件处理、动画效果等操作•本文将介绍jQuery的基本使用流程下载与引入1.打开jQuery官方网站2.在下载页面选择需要的版本,通常选择最新版本3.点击下载按钮,保存下载的jQuery文件(一般为)4.在HTML文件中引入jQuery<script src=""></script>基本语法•使用$()函数来选取一个或多个元素•可以通过id、类、元素类型等选择器来选取元素•对选取的元素进行各种操作和事件绑定•示例代码:$(document).ready(function(){ // 在这里编写jQuery代码 });常用操作•修改元素的属性与样式$("selector").attr("attribute", "value"); // 修改属性 $("selector").css("property", "value"); // 修改样式•添加、移除和切换类$("selector").addClass("class1 class2"); // 添加类 $("selector").removeClass("class1 class2"); // 移除类 $("selector").toggleClass("class1 class2");// 切换类•修改元素的内容$("selector").html("new content"); // 修改HTML内容$("selector").text("new text"); // 修改纯文本内容•隐藏与显示元素$("selector").hide(); // 隐藏元素 $("selector").show(); // 显示元素•添加事件处理函数$("selector").click(function(){ // 在这里编写事件处理逻辑 });动画效果•实现元素的淡入淡出$("selector").fadeIn(speed); // 淡入$("selector").fadeOut(speed); // 淡出•实现元素的滑动效果$("selector").slideDown(speed); // 向下滑动$("selector").slideUp(speed); // 向上滑动•实现元素的自定义动画$("selector").animate({property: value}, speed);// 自定义动画总结•jQuery是一个强大且易用的JavaScript库•通过选择器选取元素,并使用各种操作和事件绑定,可以方便地操作网页中的元素•jQuery还提供了丰富的动画效果,可以通过简单的代码实现复杂的动效以上便是jQuery的基本使用流程,希望本文对你了解和使用jQuery有所帮助。
jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /><meta name="robots" content="all" /><meta name="author" content="" /><meta name="Copyright" content="Copyright All Rights Reserved." /><meta name="MSSmartTagsPreventParsing" content="true" /><meta http-equiv="imagetoolbar" content="false" /><link rel="stylesheet" type="text/css" href="c5.css"tppabs="/c5.css" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /><title>jQuery 教程</title></head><body class="browserscripting"><div id="wrapper"><div id="header"><a href="javascript:if(confirm('/index.html \n\n该文件无法用 Teleport Ultra 下载, 因为它是一个域或路径外部被设置为它的启始地址的地址。
jQuery学习手册
jQuery学习手册jQuery教程一、jQquery语法基础语法:$(selector).action()·美元符号定义jQuery·选择符(selector)‚查询‛和‚查找‛HTML元素·jQuery的action()执行对元素的操作二、 jQuery选择器三、 jQuery事件jQuery效果一、jQuery隐藏和显示二、jQuery淡入淡出三、jQuery滑动四、jQuery动画五、jQuery停止动画六、jQuery CallBack七、jQuery ChainingjQuery HMLT一、jQuery 获取·获取内容– text()、html()以及val()①text() –设置或返回所选元素的文本内容②html() –设置或返回所选元素的内容(包括HTML标记)二、jQuery 设置三、jQuery 添加四、jQuery 删除五、jQuery 获取并设置CSS类六、jQuery css()jQuery 学习手册—刘山俊整理七、 jQuery 尺寸·jQuery width()和 height()方法 width()方法设置或返回元素的宽度(不包括内外边距和边框) 。
height()方法设置或返回元素的高度(不包括内外边距和边框) 。
实例: $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt); }); ·jQuery innerWidth()和 innerHeight()方法 innerWidth ()方法返回元素的宽度(包括内边距) 。
jquery基本方法
jquery基本方法jQuery是一个快速、简洁的JavaScript库,提供了诸多简化HTML 文档遍历、事件处理、动画效果和AJAX交互的方法。
下面是jQuery的基本方法介绍,包括选择器、DOM操作、事件处理、动画效果和AJAX交互等方面。
1.选择器选择器是jQuery的核心功能之一,它能够轻松地从HTML文档中选择元素并进行操作。
以下是一些常用的选择器方法:- 元素选择器:通过元素名称来选择元素,例如$("div")选取所有div元素。
- 唯一选择器:通过id属性来选择唯一的元素,例如$("#myId")选取id为myId的元素。
- 类选择器:通过类名来选择元素,例如$(".myClass")选取所有class为myClass的元素。
- 属性选择器:通过元素的属性来选择元素,例如$("[name='myName']")选取所有name属性值为myName的元素。
- 后代选择器:通过选择元素的后代元素来选择元素,例如$("div p")选取所有div元素的后代p元素。
2.DOM操作jQuery提供了一系列方便的DOM操作方法,可以对文档结构进行增删改查等操作。
以下是一些常用的DOM操作方法:- 添加元素:可以使用append(和prepend(方法在元素内部的末尾或开头添加新元素。
- 删除元素:可以使用remove(方法删除指定的元素。
- 修改元素:可以使用text(和html(方法修改元素的文本内容或HTML内容。
- 修改属性:可以使用attr(方法修改元素的属性值。
- 遍历元素:可以使用each(方法遍历元素集合。
3.事件处理jQuery提供了丰富的事件处理方法,可以方便地绑定和处理事件。
以下是一些常用的事件处理方法:- 绑定事件:可以使用on(方法绑定事件,例如$("div").on("click", function({})绑定点击事件。
jQuery使用手册
jQuery使用手册翻译整理:Young.J官方网站:jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的!下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)jQuery Downloads (/src/)下载完成后先加载到文档中,然后我们来看个简单的例子!<script language="javascript" type="text/javascript">$(document).ready(function(){$("a").click(function() {alert("Hello world!");});});<script>上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
(个人理解$ 相当于js中with{} 的含义)在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.我将从以下几个内容来讲解jQuery的使用:1:核心部分2:DOM操作3:css操作4:javascript处理5:动态效果6:event事件7:ajax支持8:插件程序一:核心部分$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子:未执行jQuery前:<p>one</p><div><p>two</p></div><p>three</p><a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能:function jq(){alert($("div > p").html());}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容function jq(){$("<div><p>Hello</p></div>").appendTo("body");}运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”$(elem)说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象参数:elem:通过jQuery对象压缩的DOM元素例子:未执行jQuery前:<p>one</p><div><p>two</p></div><p>three</p><a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能:function jq(){alert($(document).find("div > p").html());}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容function jq(){$(document.body).background("black");}运行:当点击id为test的元素时,背景色变成黑色$(elems)说明:限制jQuery作用于一组特定的DOM元素参数:elem:一组通过jQuery对象压缩的DOM元素例子:未执行jQuery前:<form id="form1"><input type="text" name="textfield"><input type="submit" name="Submit" value="提交"></form><a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能:function jq(){$(form1.elements ).hide();}运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
jquery-easyui中文详细说明文档完整
Jquery easyui 使用说明1. Layout 布局 (1)1.1. 样图 (1)1.2. 示例代码 (2)2. tabs面板 (3)2.1. 样图 (3)2.2. 示例代码 (3)3. jQuery EasyUI 提示框(Messager)用法 (5)3.1. 样图 (5)3.2. 示例代码 (5)4. 分页(Pagination)用法 (6)4.1. 样图 (7)4.2. 示例代码 (7)5. jQuery EasyUI 对话框(Dialog)用法 (8)5.1. 示例图片 (8)5.2. 示例代码 (8)6. jQuery EasyUI 窗口(Window)用法 (9)6.1. 样图 (10)6.2. 示例代码 (10)7. jQuery EasyUI 验证框(V alidateBox)用法 (11)7.1. 样图 (11)7.2. 示例代码 (11)8. jQuery EasyUI 数字框(NumberBox)用法 (13)8.1. 样图 (13)8.2. 示例代码 (13)9. DataGrid (13)yout 布局1.1. 样图UsageMarkup在div 里面加载布局的方法:class="easyui-layout"布局面板必需要有一个'center' 面板.1.2. 示例代码<div id="cc" style="width:600px;height:400px;" class="easyui-layout"><div region="north" title="North Title" split="true" style="height:100px;"></div><div region="south" title="South Title" split="true" style="height:100px;"></div><div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div><div region="west" split="true" title="West" style="width:100px;"></div><div region="center" title="center title" style="padding:5px;background:#eee;"></div></div>jQuery$('#cc').layout(options);DependenciespanelresizableOptionsLayout Panel Options所有属性都是放在<div/>标签里面null标题名字,当写了名字后将会产生折叠图标false booleanTrue时,面板间将产生一个拖动条可改变面板间大小在面板头部显示图标的CSSnull 将在布局面板中产生一个图标如:icon="icon-reload"fit="true" 自动改变大小Methods2.tabs面板2.1. 样图2.2. 示例代码在<div/>标签里使用方法class="easyui-tabs"UsageMarkup<div id="tt" style="width:500px;height:250px;" class="easyui-tabs"><div title="Tab1" style="padding:20px;display:none;">tab1</div><div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> tab2</div><div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> tab3</div></div>jQueryTo create a tabs container$('#tt').tabs(options);To add a tab panel:$('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true});DependenciesnoneOptionsTabs ContainerOverride defaults with $.fn.tabs.defaults.PropertiesEvents方法标签面板属性3.jQuery EasyUI 提示框(Messager)用法jQuery EasyUI 提示框(Messager)不仅重写了window默认的alert,confirm和prompt,而且还增加一些在页面右下角显示的提示框。
jQuery详细实用说明文档
jQuery语法讲解
3.1 jQuery语法
– 核心 – 选择器 – 属性 – 文档处理 – CSS – 事件 – 效果 – AJAX
jQuery核心
3.1.1 jQuery核心函数
( jQuery(expression,[context]) )
• 这个函数接收一个包含 CSS 选择器的字符串,然后用 这个字符串去匹配一组元素。 • jQuery 的核心功能都是通过这个函数实现的。 jQuery 中的一切都基于这个函数,或者说都是在以某种方式使 用这个函数。这个函数最基本的用法就是向它传递一个 表达式(通常由 CSS 选择器组成),然后根据这个表 达式来查找所有匹配的元素。 • 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在 这个 context 中查找。
*
* • 匹配所有元素,多用于结合上下文来搜索。 • HTML 代码: <div>DIV</div> <span>SPAN</span> <p>P</p> • jQuery 代码: $("*") • 结果: [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
#id
• #id 根据给定的ID匹配一个元素。 • 查找 ID 为"myDiv"的元素。 • HTML 代码: <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> • jQuery 代码: $("#myDiv"); • 结果: [ <div id="myDiv">id="myDiv"</div> ]
使用jQuery教程
使用jQuery,第 1 部分: 将桌面应用程序引入浏览器核心函数、选择和遍历结果Michael Abernethy, 产品开发经理, Optimal Auctions简介: jQuery 是一种JavaScript 库,它是开发人员简化动态富Internet 应用程序创建的最佳选择。
随着基于浏览器的应用程序不断代替桌面应用程序,这些库的使用将会不断增长。
在本系列文章中了解jQuery,并学习如何在您的Web 应用程序项目中实现jQuery。
查看本系列更多内容标记本文!发布日期: 2008 年9 月28 日级别:中级其他语言版本:英文简介jQuery 逐渐从其他JavaScript 库选择中脱颖而出,并且成为Web 开发人员的最佳选择。
它迅速成为希望简化客户端开发和快速高效地创建富Internet 应用程序(RIA)的程序员的首选。
随着RIA 的广泛使用,将越来越多地使用JavaScript 库协助开发。
RIA 被定义(松散地)为通过浏览器运行的应用程序,这种浏览器结合使用CSS/JavaScript/Ajax 创建类似桌面应用程序的外观。
Firefox、Internet Explorer 和Safari 最新发行版中新增的特性,以及Google 新Chrome 浏览器最近的版本,都专注于加快每个浏览器的内部JavaScript 引擎的速度,其惟一目的是更加适应浏览器制造商为未来设计的RIA。
这些公司认为未来的Web 页面将包含大量JavaScript 代码,因此首先开发一个成熟的、没有bug 的库是非常重要的。
Ajax 资源中心请访问Ajax 资源中心,这是有关Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。
任何Ajax 的新信息都能在这里找到。
因此,随着未来Web 应用程序不断朝富沉浸式界面(rich and immersive interface)的方向发展,Web 开发人员不断地寻找可以简化这些工作的工具。
jquery_详细中文说明教学文档
目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1. load( url, [data], [callback] ) (24)2. jQuery.get( url, [data], [callback] ) (25)3. jQuery.post( url, [data], [callback], [type] ) (26)4. jQuery.getScript( url, [callback] ) (27)5. jQuery Ajax 事件 (27)6. jQuery.ajax( options ) (29)7. jQuery.ajaxSetup( options ) (31)8. serialize() 与serializeArray() (31)1部分常用方法速查$()如果()内是css选择器:找到相应的节点包装成JQuery对象DOM对象:直接包装成JQuery对象一段HTML代码:先创建DOM对象,再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。
返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。
返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。
返回Array<Element(s)>选择器parent > child取得<div>下的所有<span>子节点$("div > span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行,从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行,从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素,从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素,从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素,从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute = value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute != value]选取所有不是hidden的input元素,注意,没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute ^= value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute $= value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素(包括input, textarea, select和button)$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox, radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key) attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img /> ]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[ <p class="selected highlight">Hello</p> ] 如果要替换样式,用attr() 返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是?</p>JQuery:$("p").removeClass("red");Result:<p >你最喜欢的是?</p>可以同时移除多个样式:$("p").removeClass("red bold");或者全部移除样式:$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式,则移除,不存在,则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式,返回布尔值$("p").hasClass("blue"); 该方法等价于:$("p").is(".blue"); 返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html:<input type="text" id="searchbox" value="搜索的内容…" /> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue 表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中:$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像,并设置它们的src 属性注意此处this 指代的是DOM 对象而非jQuery 对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src = "test" + i + ".jpg";});Result:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素,并返回相应元素的索引值,从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar')); //1$('li').index($('li:gt(0)')); //1$('#bar').index('li'); //1$('#bar').index(); //1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index) :index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[ <img src="test1.jpg"/> ]返回Array<Element>/ Elementeq(index)以对象形式获取第index个元素,位置从0算起获取匹配的第二个元素HTML:<p> This is just a test.</p><p> So is this</p>jQuery:$("p").eq(1)Result:[ <p> So is this</p> ]补充 .get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color", "red");//这个是错误的$("ul li").eq(1).css("color", "red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象,如:var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first() 等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last() 等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。
JQuery实用教程(含语法和特效)
基本语法:$("HTML元素").action()实例:$(this).hide(); 隐藏当前元素$("p").hide(); 隐藏所有段落$("p.test").hide(); 隐藏所有class="test"的段落$("#test").hide(); 隐藏所有id="test"的元素文档就绪函数$(document).ready(function(){--------});这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:?试图隐藏一个不存在的元素。
?获得未完全加载的图像的大小。
.divcss{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}jQuery 元素选择器jQuery 使用CSS 选择器来选取HTML 元素。
$("p") 选取<p> 元素。
$("p.intro") 选取所有class="intro" 的<p> 元素。
$("p#demo") 选取id="demo" 的第一个<p> 元素。
jQuery 属性选择器jQuery 使用XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有href 属性的元素。
$("[href='#']") 选取所有带有href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有href 值不等于"#" 的元素。
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_EasyUI中文帮助手册
jQuery_EasyUI中文帮助手册jQuery EasyUI中文帮助手册API版本:1.2.4 目录jQuery EasyUI中文帮助手册 (1)API版本:1.2.4 (1)1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (26)布局面板 (26)3. 菜单和按钮 (29)3.1 菜单 (29)菜单 (29)3.2 链接按钮 (32)链接按钮 (32)3.3 菜单按钮 (33)菜单按钮 (33)3.4 分隔按钮 (34)分隔按钮 (34)4. 表单 (35)4.1 表单 (35)表单 (35)4.2 表单验证 (37)表单验证 (37)4.3 自定义组合框 (39) 自定义组合框 (39)4.4 可装载组合框 (41) 可装载组合框 (41)4.5 组合树 (44)组合树 (44)4.6 组合表格 (45)组合表格 (45)4.7 数字验证框 (47)数字验证框 (47)4.8 日期组合框 (48)日期组合框 (48)4.9 日期时间组合框 (50) 日期时间组合框 (50) 4.10 日历 (51)日历 (51)4.11 调节器 (53)调节器 (53)4.12 数字调节器 (54)数字调节器 (54)4.13 时间调节器 (55)时间调节器 (55)5. 窗口 (56)5.1 窗口 (56)窗口 (56)5.2 对话窗口 (58)对话窗口 (58)5.3 消息窗口 (60)消息窗口 (60)6. 数据表格和树形菜单 (62) 6.1 数据表格 (62)数据表格 (62)6.2 属性表格 (71)属性表格 (71)6.3 树形菜单 (71)树形菜单 (71)6.4 树形表格 (77)树形表格 (77)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称类型描述默认值modules (模块) object (对象)预定义模块。
jQuery参考手册(全)
$("button").click(function(){
jQuery 参考手册
在 W3School,您将找到包含所有 jQuery 对象和函数的完整参考手册:
选择器 事件 效果 文档操作 属性 CSS AJAX 遍历 数据 DOM 元素 核心
jQuery 选择器
选择器
实例
*
$("*")
#id
$("#las tname")
.class
$(".intro")
$("#intro")
$("ul li:first")
当前 HTML 元素 所有 <p> 元素 所有 class="intro" 的 <p> 元素 所有 class="intro" 的元素 id="intro" 的第一个元素 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") $("div#intro .head")
:input
$(":input")
所有 <input> 元素
jQuery使用手册
jQuery使用手册目录1 前言 (4)2 核心部分 (4)$(expr) (4)$(elem) (5)$(elems) (6)$(fn) (6)$(obj) (6)each(fn) (7)eq(pos) (7)get() get(num) (8)index(obj) (8)size() Length (8)3 DOM操作 (9)属性 (9)herf() herf(val) (9)after(html) 在匹配元素后插入一段html (9)after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后 . 10append(html)在匹配元素内部,且末尾插入指定html (10)appendTo(expr) 与append(elem)相反 (10)clone() 复制一个jQuery对象 (10)empty() 删除匹配对象的所有子节点 (11)insertAfter(expr) insertBefore(expr) (11)prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入 (11)remove() 删除匹配对象 (11)wrap(elem) 将匹配对象包含在给出的对象内 (12)遍历、组合 (12)add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象 (12)add(el) 在匹配对象的基础上在附加指定的dom元素。
(12)add(els) 在匹配对象的基础上在附加指定的一组对象,els是一个数组。
(12)ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了) (13)ancestors (expr) 在ancestors()的基础上之取符合表达式的对象 (13)children() 返回匹配对象的子介点 (13)children(expr) 返回匹配对象的子介点中符合表达式的节点 (13)parent () parent (expr)取匹配对象父节点的。
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还提供了一系列用于处理事件的方法。
借助事件处理程序,可以在元素上定义事件,比如点击事件、鼠标悬停事件等。
jQuery前端开发指南
jQuery前端开发指南jQuery是一种广泛应用于前端开发的JavaScript库,它简化了HTML文档的遍历与操作、事件处理、动画效果的实现和AJAX等功能的开发。
本文将从多个方面介绍jQuery的使用,包括选择器、DOM操作、事件处理、动画效果和AJAX等内容。
一、选择器选择器是jQuery的核心特性之一,它通过使用CSS选择器来选取指定的元素进行操作。
首先,我们需要了解基本的选择器类型:1. 元素选择器:通过元素名称选取元素,如$("div")选取所有div元素。
2. ID选择器:通过元素的ID属性选取元素,如$("#myDiv")选取ID为myDiv的元素。
3. 类选择器:通过元素的类名选取元素,如$(".myClass")选取class为myClass的元素。
4. 属性选择器:通过元素的属性选取元素,如$("[name='myName']")选取name属性为myName的元素。
5. 后代选择器:通过指定元素的后代元素选取元素,如$("ul li")选取所有ul下的li元素。
除了以上基本的选择器类型,jQuery还支持伪类选择器、过滤选择器和层级选择器等其他选择器类型,这些选择器的灵活运用可以帮助我们更加高效地选取元素进行操作。
二、DOM操作jQuery提供了丰富的DOM操作方法,可以实现元素的增删改查等功能。
常用的DOM操作方法包括:1. 获取和设置元素的内容:使用.text()方法获取或设置元素的文本内容,使用.html()方法获取或设置元素的HTML内容。
2. 获取和设置元素的属性:使用.attr()方法获取或设置元素的属性值,如.attr("src")获取img元素的src属性值。
3. 添加和删除元素:使用.append()方法在元素内部末尾添加内容,使用.remove()方法删除指定元素。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
4:javascript处理
5:动态效果
6:event事件
7:ajax支持
8:插件程序
一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
jQuery Downloads (/src/)
下载完成后先加载到文档中,然后我们来看个简单的例子!
<script language="javascript" type="text/javascript">
function jq(){
alert($("p").eq(1).html())
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
jQuery</a>jQuery代码及功能: function jq(){
alert($("img").length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
jQuery代码及功能: function jq(){
alert($("div > p").html());
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容 function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.
我将从以下几个内容来讲解jQuery的使用:
1:核心部分
2:DOM操作
3:css操作
8例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("p").get(1).innerHTML);
jQuery代码及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
翻译整理:Young.J
官方网站:
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
下载地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
参数:pos (Number): 期望限制的索引,从0 开始
7例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($(document).find("div > p").html());
参数: elem:一组通过jQuery对象压缩的DOM元素
3例子:
未执行jQuery前:
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
})
运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
5例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
参数:expr:字符串,一个查询表达式或一段html字符串
1例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
jQuery代码及功能:
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
10例子:
未执行jQuery前: <img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
9例子:
未执行jQuery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test">jQuery</a>
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
6例子:
未执行jQuery前:
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>