首页 > 代码库 > jquery 入门与知识

jquery 入门与知识

一)什么是jQuery?
【以封装的思想,重构<<图片显示和隐藏>>】
第三方组织预先写好的一些实用JS文件、类,方法,都统称为JS实用库,免费放在网上,同时配有相关的学习文档和案例,
像以上实用库有很多,其它在JavaEE领域比较著名是的jQuery。

*二)为什么要使用jQuery?
(1)jQuery是目标是让程序员写少代码,做多事情
(2)jQuery库,压缩后,容量较小,不会占用系统过多资料,WEB页面加载的速度相对较快
(3)jQuery库,兼容各大主流浏览器,它是美国人开发的,主要依据美国人当时的浏览器环境
(4)jQuery库,能完成原DOM能完成的所有操作,而且比DOM完成的更优
(5)jQuery库,文档和案例非常全,便于程序员学习
(6)jQuery库,推荐为每一个标签,取一个id属性
(7)jQuery库,不是万能的,它只对JavaScript中的部份内容进行封装,而其它的部份,依然要使用传统方式
因此,项目中的jQuery代码是一个杂合体。

三)jQuery的开发步骤?
(1)通过<script>标签,引用第三方js库,注意引用库的路径问题
(2)调用jQuery库中相关的方法API,来完成业务操作

四)DOM对象和jQuery对象相互转换
(1)什么是DOM对象
通过DOM的API,返回的对象,就叫做DOM对象,例如:document.getElementById("divID"):返回值:DOM对象

(2)什么是jQuery对象
A)通过jQuery的API,返回的对象,就叫做jQuery对象,例如:$("#divID"):返回值:jQuery对象
B)$(dom对象),返回值就是jQuery对象,例如:$(document),$(this)

(3)DOM对象转成jQuery对象
$(dom对象)->jQuery对象

(4)jQuery对象转成DOM对象
A)jQuery对象[0]->dom对象
B)jQuery对象.get(0)->dom对象

注意:dom对象只能调用dom的api
jquery对象也只能调用jquery的api
不能混调

五)DOM对象与jQuery对象对错误的显示
(1)DOM对象的三种基本定位方式
A)document.getElementById()
B)document.getElementsByName()
C)document.getElementsByTagName()

(2)jQuery对象的三种基本定位方式
A)id属性,例如:$("#id")
B)标签名,例如:$("input")
C)样式名,例如:$(".oneClass")

(3)DOM对象出错的显示
在不做判断的情况下,dom出错后,无显示

(4)jQuery对象出错的显示
在不做判断的情况下,jquery出错后,有显示,显示为"undefined"

*六)jQuery九类选择器【在网页中,【查找】你需要的节点】(参见jQueryAPI.chm手册)
(1)基本选择器[selector_1.html]
$("#id")
$("div")
$(".oneClass")
$("p,div,span")
$("#id,div,.oneClass")

(2)层次选择器[selector_2.html]
$("form input"):祖先 后代
$("form>input"):父亲>直接小孩
$("form+input"):兄弟的第一个,只包括form元素下面
$("form~input"):所有兄弟,只包括form元素下面的

(3)增强基本选择器[selector_3.html]
$("ul li:first")
$("ul li:last")
$("table tr:even")
$("table tr:odd")
$("table tr:eq(0)")
$("table tr:gt(0)")
$("table tr:lt(2)")
$(":header")
$(":checkbox:not(:checked)")选择所有未选中的复选框。

(4)内容选择器[selector_4.html]
$("div:contains(‘John‘)
$("p:empty")
$("div:has(‘p‘)
$("p:parent")

(5)可见性选器[selector_5.html]
$("table tr:hidden")
$("table tr:visible")

(6)属性选择器[selector_6.html]
$("div[id]")
$("input[name=‘newsletter‘]")
$("input[name!=‘newsletter‘]")
$("input[name^=‘news‘]")
$("input[name$=‘letter‘]")
$("input[name*=‘e‘]")
$("input[id][name$=‘letter‘]")

(7)子元素选择器[selector_7.html]
$("ul li:first-child")
$("ul li:last-child")
$("ul li:only-child")
$("ul li:nth-child(1)"),索引,从1开始

(8)表单选择器[selector_8.html]
(9)表单对象属性选择器[selector_9.html]
$("input:enabled")
$("input:disabled")
$(":checkbox:checked")
$(":checkbox:not(:checked)
$("select option:selected")

*七)jQuery中常用方法(上)【在网页中,【操作】你需要的节点】
jquery对象.size()-------------dom对象.length
jquery对象.html()-------------dom对象.innerHTML,不能用于XML
jquery对象.val()--------------dom对象.value
jquery对象.css("back-ground","blue")
jquery对象.addClass("onClass")
jquery对象.attr("checked","checked")