JQuery文档分析1-JQuery核心与选择器-阿里云开发者社区

开发者社区> usher.yue> 正文

JQuery文档分析1-JQuery核心与选择器

简介: 最新学习DWZ框架 ,最后发现有必要先学习下JQuery。JQuery,发现跟着视频学习无法完全更好的理解,没办法只能自己看文档学习,毕竟官方的文档才是王道。 我下载的文档时JQuery1.7 ,幸好有中文版  JQuery是对javascript 的一个封装,目的是在用更少的代码开发出更强的交互性web , 其实所谓的JQuery库也只是一个js文件而已,可以去官方下载到。
+关注继续查看
最新学习DWZ框架 ,最后发现有必要先学习下JQuery。JQuery,发现跟着视频学习无法完全更好的理解,没办法只能自己看文档学习,毕竟官方的文档才是王道。 我下载的文档时JQuery1.7 ,幸好有中文版 
JQuery是对javascript 的一个封装,目的是在用更少的代码开发出更强的交互性web ,
其实所谓的JQuery库也只是一个js文件而已,可以去官方下载到。。
在自己的web中使用jQuery只需要 增加
 <script type="text/javascript"  src="JQuery.js"></script>   即可 。
1、jQuery介绍
JQuery的核心是jQuery这个函数,在JQuery库中他可以用$ 这样一个美元符号来代替 。 他是实现一切JQuery的基础 。 
我们知道我们在利用HTML DOM编写页面的时候我们经常会利用 document.getElementByID(id) 来获取html dom树中的节点元素对应的dom对象,
这个jQuery()和$()的作用和html dom中的操作类似,都是为了获取到元素,只不过前者是为了获取到元素所对应的 dom对象,这个对象只有一个。
而jQuery的功能更强大.他可以获取html dom树中的 一个 或者一组 节点对应的 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.class  p") 所有针对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类型的表单元素     
 
$("*")  找到所有元素   
 
$("form input")   找出表单中的所有元素   
 
$("table td") 找出表格中的所有列 
 
$("label + input")  找到所有跟在lable后面的input元素   
 
$("form ~ input") 找到和form在 input在同一个父亲标签下的所有input元素
 
$("li:first");    取出<ul><li></li><li></li></ul>取出当前文档中的第一个li元素 
 

$("li:first");    取出<ul><li></li><li></li></ul>取出当前文档中的最后一个li元素 
 

$("input:checked") 找出input中所有checked的元素 
 
$("input:not(:checked)")找出input中所有的未checked的元素 
 
$("select option:selected") 找出select中所有被选中的元素 
 
$("input:hidden")  找出input中所有不可看见元素  
 
$("input:hidden")  找出form中所有button 
 
$("td:parent")  查找出td的所有父元素
 
$("tr:visible")  找出所有可见元素tr
 
$("td:empty") 找出所有td为空的元素   
 
 
$("ul li:first-child")  查找所有 ul中的 第一个li 
 
$("ul li:last-child")   查找所有 ul中的 最后一个li
 
$("ul li:only-child") 只查找UL中唯一元素 li  
 
下面主要应用于表单中元素的查找
$(":text")      
$(":password")  
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$("input:hidden")  表示input元素中type为hidden的元素
$("input:disabled") 找出input中无效的元素  如果文本框  
$("input:checked")  查找input中所有选择的元素 如 checkbox
$("select option:selected") 找出 select 中的option中属性selected=true的元素 //....
 
到此jQuery的选择器就分析完了
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
个人搭建网站的服务器选择
首先,先弄清楚自己的需求和用途:1、是建立一个静态页面还是动态页面? 2、对域名有什么要求? 3、内容有多少?是否要支持请求量比较大的下载? 4、如果是动态页面要做成多大规模的? 5、BBS 一类的页面对在线用户数量的估算是多少? 6、有数据库的话是什么类型的?数据量多大? 7、网站内容有没有政治敏感的东西? 8、预算多少? 9、对安全性有没有要求? 一般来说,选择网站服务器需要考虑这么几个方面:买主机(空间 /VPS 等),主要考察空间大小 / 流量 / 连接数 / 数据库 / 流量 / 是否有其它特殊用途等。
6325 0
玩转大数据系列之二:数据分析与处理
经过了数据采集和同步之后,就可以在阿里云上进行数据分析和处理,来玩转您的数据了。本文向您介绍在阿里云大数据各产品中,以及各产品之间怎样来完成您的数据处理和数据分析。
10595 0
jQuery EasyUI API 中文文档 - 日期框(DateBox)
DateBox 日期框 扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。 依赖 combo calendar 用法 1. 1. $('#dd').datebox({   2.     required:true 3. });  特性 其特性扩展自 combo,下列是为 datebox 增加的特性。
840 0
jQuery EasyUI API 中文文档 - 对话框(Dialog)
Dialog 对话框 扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。 依赖 window linkbutton 用法 1. 2.     Dialog Content.   3. 1. $('#dd').dialog({   2.     modal:true 3. });  特性 其特性扩展自 window,下列是为 dialog 重写的特性。
755 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
862 0
jQuery EasyUI API 中文文档 - 窗口(Window)
Window 窗口    扩展自 $.fn.panel.defaults,用 $.fn.window.defaults 重写了 defaults。 依赖 draggable resizable panel 用法 1.
633 0
+关注
usher.yue
算法相关技术专家
431
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载