jquery学习
来源:互联网 发布:淘宝交不了保证金 编辑:程序博客网 时间:2024/05/21 19:24
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 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
更多的选择器实例
jQuery 选择器
所有动画元素 :contains(text)$(":contains('W3School')")包含指定字符串的所有元素:empty$(":empty")无子(元素)节点的所有元素:hidden$("p:hidden")所有隐藏的 <p> 元素:visible$("table:visible")所有可见的表格 s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素 [attribute]$("[href]")所有带有 href 属性的元素[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素 :input$(":input")所有 <input> 元素:text$(":text")所有 type="text" 的 <input> 元素:password$(":password")所有 type="password" 的 <input> 元素:radio$(":radio")所有 type="radio" 的 <input> 元素:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素:submit$(":submit")所有 type="submit" 的 <input> 元素:reset$(":reset")所有 type="reset" 的 <input> 元素:button$(":button")所有 type="button" 的 <input> 元素:image$(":image")所有 type="image" 的 <input> 元素:file$(":file")所有 type="file" 的 <input> 元素 :enabled$(":enabled")所有激活的 input 元素:disabled$(":disabled")所有禁用的 input 元素:selected$(":selected")所有被选取的 input 元素:checked$(":checked")所有被选中的 input 元素
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
jQuery 效果函数
jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- find()
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
缩写搜索元素的范围
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });});
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
实例
$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); });});
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
实例
$("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); });});
jQuery 和其他 JavaScript 框架
正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?
其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法。
jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
实例
当然,您仍然可以通过全名替代简写的方式来使用 jQuery:
$.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行!"); });});
亲自试一试
实例
您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:
var jq = $.noConflict();jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行!"); });});
亲自试一试
实例
如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
$.noConflict();jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行!"); });});
17.哪个 jQuery 方法用于处理命名冲突?
您的回答:noNameConflict()
正确答案:noConflict()
18.哪个 jQuery 方法用于添加或删除被选元素的一个或多个类?
您的回答:altClass()
正确答案:toggleClass()
19.$("div#intro .head") 选择器选取哪些元素?
您的回答:id="intro" 或 class="head" 的所有 div 元素
正确答案:id="intro" 的首个 div 元素中的 class="head" 的所有元素
20.jQuery 是 W3C 标准吗?
您的回答:Yes
正确答案:No
13.将所有 div 元素的高度设置为 100 像素的正确 jQuery 代码是?
您的回答:$("div").height="100"
正确答案:$("div").height(100)
- 学习jquery-Jquery基础知识
- jquery学习--jQuery安装
- jQuery学习--jQuery选择器
- 学习JQuery
- jquery 学习
- JQuery 学习
- jquery 学习
- jQuery学习
- 学习JQuery
- jquery 学习
- jquery学习
- 学习jquery
- Jquery 学习
- JQuery 学习
- Jquery学习
- jquery 学习
- JQuery 学习
- jquery 学习
- 虚拟机ubuntu下挂载windows下的硬盘
- C++虚函数与虚函数表解析
- Excel数据生成sql语句
- 使用SecureCRT连接vmware下ubuntu
- vim基本操作---1
- jquery学习
- vim基本操作---2
- vim基本操作---3
- vim配置文件说明
- linux shell脚本基础-----1
- linux shell脚本基础-----2
- linux shell脚本基础-----3
- C语言之关键字
- android开发环境搭建