JavaWeb04-jQuery(Java真正的全栈开发)

广告投放合作详谈加QQ号2524138991

jQuery

一.jQuery入门

1.javascript类库

JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

核心理念是write less,do more(写得更少,做得更多)

当前流行的 JavaScript 库有：

jQuery 使用非常多了

EXTJS 功能比jQuery更多，但ext2.0收费

Prototype 一般用于做框架

YUI! (Yahoo! User Interface)

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

2.jQuery介绍

??jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。

??jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布

??jQuery是免费、开源的

??jQuery分类：

WEB版本：我们主要学习研究 （jQuery-版本.js 、 jQuery-版本-min.js）

UI版本：集成了UI组件

mobile版本：针对移动端开发

qunit版本：用于js测试的

jquery官网 http://jquery.com/

我们接触到的版本

3.导入jQuery

通过script标签的src属性导入即可

二.jQuery基本操作

1.获得jQuery对象

语法：$(选择器或者DOM对象) 或 jQuery(选择器或者DOM对象)

$ == jQuery

<script type="text/javascript">

// $() 语法，建议：如果是jQuery对象变量名使用$作为前缀

var $obj = $("#username");

// val() 函数 获得 value属性的值

alert($obj.val());

</script>

2.DOM对象和jQuery对象之间的转换

注意:jQuery对象使用jquery的api（方法、函数）。DOM对象使用 dom 的函数、属性等。不能混淆使用。

<script type="text/javascript" >

//1将dom对象 转换 jquery对象

//先获得dom对象

var obj = document.getElementById("username");

//alert(obj.value);

//转换成jquery对象

var $obj = $(obj);

//获得value的值

//alert($obj.val());

//2jquery 对象 转换 dom 对象

//先通过 $(...) 获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。

//然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。

var obj2 = $obj.get(0);

//alert(obj2.value);

// 底层是数组，也可以直接通过下标获得dom对象

alert($obj[0].value);

</script>

三.选择器

基本,层次,基本过滤,内容过滤,可见性过滤,属性,子元素过滤,表单过滤,表单对象属性过滤

1.基本

??id选择器，<标签 id="id值">

语法：$("#id值")

??元素(标签)选择器 <标签>

语法：$("标签")

??类（class）选择器 <标签 class="class名称">

语法：$(".class名称")

??所有

语法：$("*")

??多选择

语法：$("选择器1，选择器2，....")

2.层次

??所有子孙元素

语法：$("A B") --> A标签中 所有的B标签

??所有孩子元素

语法：$("A > B") --> A标签中 所有的子标签中B标签。

??后面第一个兄弟

语法：$("A + B") --> A标签后面的第一个兄弟

??后面的所有兄弟

语法：$("A ~ B") --> A标签后面的所有兄弟

3.基本过滤

：first 获得第一个

：last 获得最后一个

：not(选择器) 过滤不需要内容

：even 所有偶数，从0开始

：odd 所有奇数

：eq(索引值) 指定下标

：gt(索引值) 大于

：lt(索引值) 小于

：header 所有<h1> ...<h6>

：animated 动画

：focus 焦点

4.内容过滤

：contains(text) 是否包含指定的内容

：empty 是否为空，不包含子元素、不包含文本

：has（选择器），当前元素，是否还有指定的孩子。

：parent 不为空，（有子节点的元素）

5.可见性过滤

：hidden 所有隐藏的(存在浏览器兼容问题)

：visible 所有可见的

6.属性

[attribute] 有此属性的元素

[attribute=value] 有属性值为value的元素

[attribute!=value] 属性值不等于value的元素

[attribute^=value] 属性值以value开头的元素

[attribute$=value] 属性值以value结尾的元素

[attribute*=value] 属性值含value的元素

[属性表达式1] [属性表达式2]... 复合属性选择器 需要同时满足多个条件时使用

7.子元素过滤

：nth-child() 指定孩子 ，从1开始。

：first-child 第一个孩子

：last-child 最后一个孩子

：only-child 自己是唯一的孩子

8.表单过滤

：input 表示所有的表单元素（input, textarea, select 和 button）

：text 文本 <input type="text">

：password 密码 <input type="password">

：radio 单选 <input type="radio">

：checkbox 复选框

：submit 提交

：image 按钮，可以显示图片

：reset 重置

：button 按钮 <input type="button"> 或 <button>

：file 文件上传

：hidden <input type="hidden" > <div style="display:none;"> <br/>(存在浏览器兼容问题)

9.表单对象属性过滤

：enabled 可以使用

：disabled 不可使用

：checked 选中的元素(单选框和多选框)

：selected 选中的元素(下拉选)

四.属性和样式

属性,类class,html代码/文本/值,css,位置,尺寸

1.属性

attr(name) 通过属性名获得属性值。<标签 属性名=“属性值”>

attr(key,val) 给指定的属性设置值。（设置一个）

attr(pro) 给jQuery对象设置一组值。使用JSON格式。

{key:value , key : value , .....} key必须使用双引号，value如果字符串也必须使用双引号。

使用单引号，属于畸形格式json

removeAttr(name) 将执行属性移除

2.类class

操作的是标签的class属性 <标签 class="class名称">

addClass(class名称) 追加一个class值

removeClass(class) class移除

toggleClass(class) 添加和移除切换。如果没有就添加，如果有就移除。

3.html代码/文本/值

操作的是标签的value属性或者标签体

val() 获得 value属性的值。<标签 value="">

val(值) 设置值

html() 获得标签体内容，以标签方式

html(值) 设置内容

text() 获得标签体内容，以文本方式

text(值) 以文本方式设置内容

4.css

操作的是标签的样式 <标签 style="k:v; k:v ; ....">

css(name) 获得样式

css(name,value) 设置样式

css(pro) 使用json设置一组样式

5.位置

offset() 获得位置，返回json数据。格式：{"top": xx , "left" : yy}

offset(坐标) 设置位置

position() 获得相对父元素偏移

scrollTop([val]) 获得 或 设置 垂直滚动条的位置

scrollLeft([val]) 获得 或 设置 水平滚动条的位置

6.尺寸

height([val]) 获得 或 设置 高度

width([val]) 获得 或 设置 宽度

五.文档处理

内部插入,外部插入,复制,替换,删除,包裹

1.内部插入

A.append(B) ，将B插入到A内部的后面。（追加到后面）

A.prepend(B) ，将B插入到A内部的前面。（追加到前面)

A.appendTo(B) , 将A插入到B内部的后面。（追加到后面）

A.prependTo(B) 将A插入到B内部的前面。（追加到前面）

2.外部插入

A.after(B)，将B插入到A后面

A.before(B) ，将B插入到A前面

A.insertBefore(B) ，将A插入到B前面

A.insertAfter(B) ，将A插入到B后面

3.复制

clone(event [,deepEven])

参数1：表示是否克隆事件

参数2：子元素中绑定数据是否被克隆。

4.替换

A.replaceWith(B) 使用B替换掉A

A.replaceAll(B) 使用A替换掉所有的B

5.删除

empty() 清空标签体内容，删除所有子元素

remove() 将指定对象移除，返回值为移除对象。但此对象将绑定事件，绑定数据都一并移除。

detach()将指定对象移除，返回值为移除对象。但此对象保留 绑定事件，绑定数据 等。

6.包裹

wrap(...) ： 每一个匹配元素使用指定的内容包裹。

wrapAll(...)：所有的元素使用一个指定的内容包裹

wrapInner(...)：子节点使用指定的内容包裹。

unwrap(): 移出该元素的父元素。

广告投放合作详谈加QQ号2524138991

获取更多资源加微信公众号【Java帮帮】 (是公众号，不是微信好友哦)

还有【Java帮帮】QQ空间，技术文章，视频，面试资料；免费分享，欢迎关注！

学习交流请加【Java帮帮】自学交流QQ群553841695