JavaWeb04-jQuery(Java真正的全栈开发)
toyiye 2024-09-09 08:57 4 浏览 0 评论
广告投放合作详谈加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
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)