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")

jquery 入门与知识,古老的榕树,5-wow.com