您的位置：首页 > Web前端 > JQuery

jquery使用，复制

2012-07-17 18:00 169 查看

最新学习DWZ框架,最后发现有必要先学习下JQuery。JQuery,发现跟着视频学习无法完全更好的理解,没办法只能自己看文档学习,毕竟官方的文档才是王道。我下载的文档时JQuery1.7,幸好有中文版

JQuery是对javascript的一个封装,目的是在用更少的代码开发出更强的交互性web,

其实所谓的JQuery库也只是一个js文件而已,可以去官方下载到。。
在自己的web中使用jQuery只需要增加
<scripttype="text/javascript"src="JQuery.js"></script>即可。
1、jQuery介绍
JQuery的核心是jQuery这个函数,在JQuery库中他可以用$这样一个美元符号来代替。他是实现一切JQuery的基础。
我们知道我们在利用HTMLDOM编写页面的时候我们经常会利用document.getElementByID(id)来获取htmldom树中的节点元素对应的dom对象,
这个jQuery()和$()的作用和htmldom中的操作类似,都是为了获取到元素,只不过前者是为了获取到元素所对应的dom对象,这个对象只有一个。
而jQuery的功能更强大.他可以获取htmldom树中的一个或者一组节点对应的jQuery对象。然后我们通过jQuery对象的内置方法可以实现对象这些元素的操作例如:显示、隐藏、设置css等等操作.实现更强操作。
2、如何使用JQuery.在哪里使用？
因为jQuery是基于javascript的所以可以再<script></script>标签对内部使用。但是在使用前,我们要考虑这一点,我们知道在web应用中
在加载页面时候总是会有延迟,所以有些元素可能没有被初始化.因此什么时候调用jQuery代码就很关键.
这里有一个约定,就是所有的jQuery代码必须在当前html文档就绪的情况下执行,所以jQuery中我们就必须将代码放到如下中
其实在javascript内部可能是在文档的onLoad中处理的。我们只要记住在使用jQuery的时候吧我们的jQuery代码放到一下三个函数
的其中一个之中即可,他们表示当文档完全下载到本地后在开始执行jQuery代码
方式1
$(document).ready(function(){
code....
});
方式2

$().ready(function(){
code....
});
方式3

$(function(){
code....
});
3、如何选择出我们要操作的html元素,也就是html中的标签对?选择之后如何操作？
$(document)表示选择出文档对应的jQuery对象,比如上面的$(document).ready(注册函数)只是我们调用了这个对象的方法而已

$("p")如果html中有p标签那么表示选择出所有的<p></p>那么针对这个jQuery对象的操作将会影响到页面的全部p标签、
比如$(function(){$("p").hide();//将会隐藏所有p标签});

$(".classname")$("#id")$("div#id")$("div.classname")$("div.classp")所有针对css的选择器都可以针对jQuery来使用。

$(myForm.elements).hide()假如myForm是一个表单name属性那么将隐藏所有表单内部的元素

$("div>p")获取位于div中的所有p标签

$("br,#a,.classname")将多个选择器的结果合并到一起,分割

$("<div><p></p></div>").appendTo("p");创建<div><p></p></div>并且添加到p标签中
$(document.body)这个body是document的内置对象,目的是获取文档中body对应的jQuery对象

$("div",xml.responseXML);这是在ajax返回的xml格式的文档中查找div标记对应的jQuery对象

$("input:radio",document.forms[0]);//在文档的第一个表单中查找所有radio类型的表单元素

[/code]

$("*")找到所有元素

[/code]

$("forminput")找出表单中的所有元素

[/code]

$("tabletd")找出表格中的所有列

[/code]

$("label+input")找到所有跟在lable后面的input元素

[/code]

$("form~input")找到和form在input在同一个父亲标签下的所有input元素

[/code]

$("li:first")

;取出<ul><li></li><li></li></ul>取出当前文档中的第一个li元素[/code]

$("li:first")

;取出<ul><li></li><li></li></ul>取出当前文档中的最后一个li元素[/code]

$("input:checked")找出input中所有checked的元素

[/code]

$("input:not(:checked)")找出input中所有的未checked的元素

[/code]

$("selectoption:selected")找出select中所有被选中的元素

[/code]

$("input:hidden")找出input中所有不可看见元素

[/code]

$("input:hidden")找出form中所有button

[/code]

$("td:parent")查找出td的所有父元素

[/code]

$("tr:visible")找出所有可见元素tr

[/code]

$("td:empty")找出所有td为空的元素

[/code]

$("ulli:first-child")查找所有ul中的第一个li

[/code]

$("ulli:last-child")查找所有ul中的最后一个li

[/code]

$("ulli:only-child")只查找UL中唯一元素li

[/code]

下面主要应用于表单中元素的查找

$(":text")

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":image")

$(":reset")

$(":button")

$(":file")

$("input:hidden")表示input元素中type为hidden的元素

$("input:disabled")找出input中无效的元素如果文本框

$("input:checked")查找input中所有选择的元素如checkbox

$("selectoption:selected")找出select中的option中属性selected=true的元素//....

[/code]

到此jQuery的选择器就分析完了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航