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 入门与知识

时间: 2024-08-12 23:23:58

jquery 入门与知识的相关文章

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

jQuery入门(3)事件与事件对象

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 一.事件与事件对象 首先看一下我们经常使用的添加事件的方式: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

linux入门基础知识及简单命令介绍

linux入门基础知识介绍 1.计算机硬件组成介绍 计算机主要由cpu(运算器.控制器),内存,I/O,外部存储等构成. cpu主要是用来对二进制数据进行运算操作,它从内存中取出数据,然后进行相应的运算操作.不能从硬盘中直接取数据. 内存从外部存储中取出数据供cpu运存.内存的最小单位是字节(byte) 备注:由于32的cpu逻辑寻址能力最大为32内存单元.因此32位cpu可以访问的最大内存空间为:4GB,算法如下: 2^32=2^10*2^10*2^10*2^2 =1024*1024*1024

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

ffmpeg入门基础知识

获取ffmpeg源代码 如果你是在Windows环境下,则可以先装SVN的一个客户端TortoiseSVN(非常好用,强烈推荐),他安装完成后会集成在右键菜单中,点Checkout菜单,在弹出的界面中输入:svn://svn.mplayerhq.hu/ffmpeg/trunk,然后选择一个本地目录,按确定就可以把ffmpeg的源代码下载到你指定的目录中了. FFMPEG功能 视频音频格式转换 关于 frame的一些基本知识 帧速率 帧速率是每秒显示的图像数.标准影片(NTSC) 是29.97 帧

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#

JQuery Ajax技术知识

=======================================JQuery Ajax技术知识=========================================== 1.serializeArray()通过序列化表单值来创建对象数组(名称和值). 可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法: $(selector).serializeArray() 返回值: 注意:此方法返回的是 JSON 对象而非 J

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性