JavaWeb04-jQuery(Java真正的全栈开发)
Posted Java帮帮
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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帮帮】QQ空间,技术文章,视频,面试资料;免费分享,欢迎关注!
以上是关于JavaWeb04-jQuery(Java真正的全栈开发)的主要内容,如果未能解决你的问题,请参考以下文章
一款基于SSM框架技术的全栈Java web项目(已部署可直接体验)