最新学习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的选择器就分析完了
分享到:
相关推荐
selector 是jQery对象选择器。 plugin 是插件的名称。 method 是相应插件现有的方法。 parameter 是参数对象,可以是一个对象、字符串等。 所有方法都定义在jQuery.fn.{plugin}.methods。每个方法都有2个参数:jq和...
jquery初学者必备,有各种jquery的选择器,个人学习时整理
ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
jquery的核心在于他的标签的选择器,打开jquery的文档你会发现,里面的选择器占据了很大的一部分的比例,
2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见...
JQuery核心用法、快速查询文档、简单实用...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
本文档列出了JQuery所有选择器,并附有详细说明和举例代码,我用的版本是1.3.2
Jquery选择器说明文档 就是选择器的总结
Jquery选择器分类整理,基本都包含到了,学习笔记。
EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展他们。...selector 是jQery对象选择器。 plugin 是插件的名称。 method 是相应插件现有的方法。 parameter 是参数对象,可以是一个对象、字符串等。
包含jquery1.7.x与jquery1.8.x版本的chm中文手册。 目录: 核心 选择器 属性 筛选 文档处理 CSS 事件 效果 Ajax 工具
纯jquery的城市选择器!浅绿色为主色调,比较温和!适合用于大型项目中 附使用说明文档。
选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...
fontIconPicker是一款非常小巧的jQuery字体图标选择器。这个字体图标选择器通过下拉框可以选择各种字体图标,并提供多种外观样式和调用图标的方法。
从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的...内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、Ajax等方面的内容。
jquery-api参考文档:讲解:核心,选择器,文档处理,事件,属性,筛选,效果等。
此文档有助于网友们快速的熟悉jQuery中的各种的各种选择器
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
jQuery Timepicker Addon多年来一直是可供选择的时间选择器,当时没有多少可用。 我感谢能为社区做出贡献的机会,也感谢在此过程中做出贡献的每个人。 这些天来有这取决于你在开发环境中的许多伟大的选择。如果你...