Javaweb基础入门（二十）之 jQuery（简介以及基本语法）

一、简介

1.概念

javascript库，封装了很多预定义的对象和使用函数

2.组成部分

• WEB版本
• UI版本 集成了UI组件
• Mobile版本 针对移动端开发
• quit版本 用js测试

3.流行的javascript库

名称	简介
JQuery	最流行
Dojo	很多js单独文件 常用来开发小图标
Prototype	对js框架开发
YUI	Yahoo User Interface
Bookstrap	来自Twitter是目前比较新的 前端框架 基于jQuery

4.优点

• 轻量级
• 核心理念：write less,do more
• 兼容各种浏览器
• 开发更便捷
• 支持文档操作/选择DOM元素/制作动画效果
• 支持代码分离和HTML标签
• 不用再插入一堆js 只要定义id即可
• jquery的api成熟 文档说明很全

二、基本语法

1.语法

$(选择器).方法名()
$–> 定义jquery 选择器–>用来查找HTML元素 .方法名–>执行对元素的操作

2.jquery对象和Dom的转换

3.选择器

基本选择器

名称	符号
id选择器	#
类选择器	.
标签选择器	input

层级选择器

语法	作用
ancestor descendant	获取ancestor元素内所有的descendant后代元素 爷孙
parent > child	获得parent元素内部所有的child子元素 父子
prev + next	获得prev后面的第一个next元素兄弟
prev ~ siblings	获得 prev元素后面的 所有兄弟
siblings(expr)	获得同级的所有兄弟元素

基本过滤

语法	作用
:first	第一个
:last	最后一个
:not(selector)	去除所有与给定选择器匹配的元素
:even	偶数 从0开始
:odd	奇数 从0开始
:eq(index)	获得指定索引 从0开始
:gt(index)	大于 从0开始
:lt(index)	小于 从0开始
:header	所有的标题元素 例如 ..
:focus	获得焦点

内容过滤

语法	作用
:contains(text)	标签体是否包含指定的文本
:empty	当前元素是否为空(是否有标签体 子元素 文本)
:has(selector)	当前元素 是否包含有指定的子元素
:parent	当前元素是否是父元素

可见性过滤

语法	作用
:hidden	隐藏 特指 <xxx style="display:none;"><input type="hidden">
:visible	可见(默认)

属性

语法	作用
[attribute]	获取指定的属性名的元素
[attribute=value]	获取属性名 等于指定值的元素
[attribute!=value]	获取属性名 不等于 指定值的元素
[attribute^=value]	获取以属性值 开头的元素
[attribute$=value]	获取以属性值 结尾的元素
[attribute*=value]	获取含有属性值的元素
[attr1][attr2][attrN]	符合选择器 多个条件同时成立 类似于 where…and…

子元素

语法	作用
:nth-child(index)	获取第几个孩子 从1开始
:first-child	第一个孩子
:last-child	最后一个孩子
:only-child	获得独生子

表单

语法	作用
:input	所有的表单元素 input select textarea button
:text	文本
:password	密码
:radio	单选框
:checkbox	复选框
:submit	选择 type=”submit”的按钮 如果button标签 没有设置type 大多数浏览器都会把它当成是submit
:image	图片按钮
:reset	重置
:button	所有的普通按钮<button> 或者是 <input type="button">
:file	文件
:hidden	隐藏域 <input type="hidden"><xxx style="display:none">

其他 <br> <option> 但是存在着浏览器兼容性问题

表单对象属性

语法	作用
:enabled	可用
:disabled	不可用
:checked	选中 单选框 复选框
:selected	选择 下拉列表中 被选中

4.属性和css

属性

attr(name) 获取指定属性名的值
attr(key,val) 给一个指定的属性名 赋值
removeAttr(name)移除指定属性

css

addClass(class)追加一个类
removeClass(class)将指定类移除
toggleClass("my") 如果有my 就将他移除 没有 就添加

HTML代码/文本/值

html()获取html代码 含有html标签
text()获取文本值 将标签过滤掉
val() 获得value值

位置

offset() 设置坐标
position()定位
scrollTop() 垂直滚动条 滚过的距离
scrollLeft()水平滚动条 滚过的距离

5.文档处理

内部插入

append() A.append(B) 将 B插入到A的内部 后面
prepend() A.prepend(B) 将 B插入到A的内部 前面
appendTo() A.appendTo(B) 将A插入到B的内部 后面
prependTo() A.prependTo(B) 将A插入到B的内部 前面

外部插入(同级)

语法	作用
after()	A.after(B) 将 B插入到A的后面
before()	A.before(B) 将 B插入到A的前面
insertAfter()	A.insertAfter(B) 将A插入到B的后面
insertBefore()	A.insertBefore(B) 将A插入到B的前面

删除

empty() 清空标签体
remove() 如果用remove()删除 事件以及绑定的数据将被清除
detach() 如果用detach()删除 事件以及绑定的数据不会被清除

绑定

data(name) 获取
data(name,value)设置

复制

clone() 克隆

替换

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

包裹

语法	作用
wrap()	A.wrap(B) 使用B将每一个A进行包裹(多个B)
unwrap()	A.unwrap() 将A的父元素删除 自己保留
wrapall()	A.wrapall(B) 使用B将所有A进行包裹(一个B)
wrapInner()	A.wrapInner(B)使用B将每一个A的标签体 包裹