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 入门与知识的更多相关文章
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- 第一百六十二节,jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
随机推荐
- VK Cup 2016 - Qualification Round 1 (Russian-Speaking Only, for VK Cup teams) A. Voting for Photos 水题
A. Voting for Photos 题目连接: http://www.codeforces.com/contest/637/problem/A Description After celebra ...
- AFNetworking3.0 Post JSON数据
使用AFNetworking3.0后网络请求由原来的AFHTTPRequestOperationManager变为AFHTTPSessionManager.一般的Post请求变成了这样: NSMuta ...
- XuLA/XuLA2
http://www.xess.com/prods/prod048.php XuLA http://www.xess.com/prods/prod055.php XuLA2 http://www.xe ...
- Maven +Tomcat+m2eclipse的热部署(hot deploy)
原文地址: http://www.cnblogs.com/cbf4life/archive/2010/01/29/1659502.html 软件版本:maven 2.2 tomcat 6.0,Ecli ...
- 第一篇 对Javascript中原型的深入理解
理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...
- PHP 输出数据库中文是问号
- 10.线程通信CountDownLatch
CountDownLatch 1.一个同步的辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个.多个线程去一直等待,用给定的计数.初始化“CountDownLatch”. 由于调用 count ...
- 刚子扯谈:网站运营在左 技术在右 真TM扯
朋友的书 鄙人的书 2013年8月5日,雨未下,天猴焖 开片语:今天的扯谈内容是我转载我Java学习交流群里面一个哥们,当然我推荐他加入了朋友的网络分析师这个群,我认为那样对他有更大帮助.现在他是XX ...
- jQuery序列化表单数据 serialize()、serializeArray()及使用
1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素 ...
- 零基础学python-3.5 内存管理
* 变量无需事先声明 * 变量无需指定类型 * 程序猿不用关系内存管理 * 变量名会被回收 * del能够直接释放资源 1.python使用的是引用调用,而不是值调用,他使用的回收算法是引用计数算法, ...