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

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(): 移出该元素的父元素。

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-01-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

3658
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

3707
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

3226
来自专栏phodal

WebStorm重构快捷键

JavaScript重构 结合 快捷键 是真正的神器。 ? 按下Command + Option + Shift + T,会有重构的菜单出现 ? 重构之前...

5345
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4129
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1889
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

1212
来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

9494
来自专栏不止是前端

Vue:Vue中操作DOM方法

6329
来自专栏互联网开发者交流社区

JS总结

1614

扫码关注云+社区

领取腾讯云代金券