一, jQuery 简介
1.1. JS 库
JavaScript 库封装了很多预定义的对象和实用函数. 能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器.
1.2. 当前流行的 JavaScript 库有:
1 jQuery , 最流行
2 EXT JS,2.0 开始收费
3 Prototype, 对 js 扩展, 框架开发.
4 Dojo
5 Bootstrap, 来自 Twitter, 是目前很受欢迎的前端框架. Bootstrap 是基于 html,CSS,JAVASCRIPT 的, 它简洁灵活, 使得 web 开发更加快捷. 基于 jQuery 一个 UI 工具
- vue
- Layui
- easyui
1.3. jQuery 介绍
JQuery 是继 prototype 之后又一个优秀的 Javascript 库. 它是轻量级的 js 库 , 它兼容 CSS3,
还兼容各种浏览器, jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器.
1.4. 优点
开源免费
核心理念是 write less,do more(写得更少, 做得更多)
轻量级 : 源码 1.11.js 大小是 286kb, 压缩 1.11.min.js 大小是 94.1k.,
兼容性好
jQuery 的语法设计可以使开发者更加便捷
例如操作文档对象, 选择 DOM 元素, 制作动画效果, 事件处理, 使用 Ajax 以及其他功能
jQuery 能够使用户的 html 页面保持代码和 html 内容分离
不用再在 html 里面插入一堆 js 来调用命令了, 只需要定义 id 即可
文档说明很全
1.5. 使用 jquery 的步骤
Step1: 把 jquery 库引入工程中
Step2:<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
Step3: 使用 jquery
1.6. jQuery 基本语法
jquery 入口: 注意: 一个页面可以有多个, 建议只写一个.
- $(document).ready(function(){
- // 页面元素加载完毕执行
- });
- // js
- window.onload=function(){};
简写:
- $(function(){
- });
等价:
jQuery(function(){});
jQuery 对象和 dom 对象转换
$(function(){
//jquery 对象 & nbsp; 约定变量名前加上 $ 符号 var $divObj = $("#mydiv");
// 把 jquery 对象转为 dom 对象 var divObj = $divObj.get(0); //divObj.html(‘hhhh ‘); divObj = $divObj[0]; //document.getElementById("mydiv"); divObj.innerHTML =‘hello‘; //js 中的 dom 对象 & nbsp; 转成 jquery 中的对象 var divObj2 = document.getElementById("mydiv");
// 转化为 jquery 对象 var $divObj2 = $(divObj2);
$divObj2.html("hehehheheheheeh");
}); |
二, 选择器 [重要]
2.1 基本选择器 [重要] 跟 css 中的选择器对应
#id , id 选择器,<xxx id=""> 通过 id 值获得元素
element, 标签选择器,<xxx> 通过标签名获得元素
.class , 类选择器,<xxx class=""> 通过 class 值获得元素. 注意: 使用点开头
s1,s2,... 并集选择器, 将多个选择器的结果添加一个数组中.
* 所有
2.2 层级
A B , 获得 A 元素内部所有的 B 后代元素.(爷孙)
A> B , 获得 A 元素内部所有的 B 子元素.(父子)
A + B , 获得 A 元素后第一个兄弟并且为 B.(兄弟)
A ~ B , 获得 A 元素后面的所有的兄弟 B.(兄弟)
2.3 基本过滤
过滤选择器格式 ": 关键字"
:first , 第一个
:last , 最后一个
:eq(index) , 获得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶数, 从 0 开始计数. 例如: 查找表格的 1,3,5... 行 (即索引值 0,2,4...)
:odd 奇数
:not(selector) 去除所有与给定选择器匹配的元素
2.4. 内容过滤
:empty 当前元素是否为空 (是否有标签体 -- 子元素, 文本)
:has(...) 当前元素, 是否含有指定的子元素
:parent 匹配含有子元素或者文本的元素
:contains( text ) 标签体是否含有指定的文本
2.5 可见性过滤 [掌握]
:hidden 隐藏. 特指 <xxx style="display:none;">
:visible 可见 (默认)
2.6 属性 [掌握]
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attrSel1][attrSel2][attrSelN]
[属性名] 获得指定的属性名的元素
[属性名 = 值] 获得属性名 等于 指定值的 的元素 [1]
[属性名!= 值] 获得属性名 不等于 指定值的 的元素
[as1][as2][as3].... 复合选择器, 多个条件同时成立
2.7 子元素过滤
:nth-child(index) , 获得第几个孩子, 从 1 开始.
:first-child , 获得第一个孩子
:last-child , 获得最后孩子
:only-child , 获得独生子
2.8 表单过滤
:input 所有的表单元素.(<input> / <select> / <textarea> / <button>)
:text 文本框 < input type="text">
:password 密码框 < input type="password">
:radio 单选 < input type="radio">
:checkbox 复选框 < input type="checkbox">
:submit 提交按钮 < input type="submit">
:image 图片按钮 < input type="image" src="">
:reset 重置按钮 < input type="reset">
:file 文件上传 < input type="file">
:hidden 隐藏域 < input type="hidden"> , 还可以获得 < xxx style="display:none">
其他值:<br> <option> , 存在浏览器兼容问题
:button 所有普通按钮. <button> 或 <input type="button">
2.9 表单对象属性过滤 [掌握]
:enabled 可用
:disabled 不可用.<xxx disabled="disabled"> 或 < xxx disabled=""> 或 <xxx disabled>
:checked 选中 (单选框 radio, 复选框 checkbox)
:selected 选择 (下拉列表 select option)
三, 属性和 CSS
3.1. 属性 [掌握] 操作标签的属性
attr(name) 获得指定属性名的值 val() attr("value");
attr(key ,val ) 给一个指定属性名设置值
attr(prop ) 给多个属性名设置值. 参数: prop json 数据
{k : v , k : v , .....}
{key: 值, key2: 值 2} json 数据
removeAttr(name) 移除指定属性
3.2. CSS 类
addClass("my") 追加一个类
removeClass("my") 将指定类移除
toggleClass("my") 如果有 my 将移除, 如果没有将添加.
3.3. HTML 代码 / 文本 / 值 [掌握]
val() 获得 value 的值
val(text) 设置 value 的值
html() 获得 html 代码, 含有标签
html(...) 设置 html 代码, 如果有标签, 将进行解析.
text() 获得文本值, 将标签进行过滤
text(...) 设置文本值, 如果有标签, 将被转义 --> < < & & > <
- 3.4. CSS
- <xxx style="key:value; key:value;">
css(name) 获得指定名称的 css 值
css(name ,value) 设置一对值
css(prop) 设置一组值 参数为 json 赋多个样式
3.5. 位置
offset() 获得坐标 , 返回 JSON 对象,{"top":200, "left" : 100}
offset(...) 设置坐标. 例如:$(this).offset({"top":0 , "left" : 0})
scrollTop() 垂直滚动条 滚过的距离
scrollLeft() 水平滚动条 滚过的距离
3.6. 尺寸
height([...]) 获得 或 设置 高度
width([...]) 获得 或 设置 宽度
四, 文档处理
4.1. 内部插入 [掌握]
A.append(B) 将 B 插入到 A 的内部后面 (之后的串联操作, 操作 A)
- <A>
- <C><C>
- <B></B>
- <A>
- A.html(B); <A><B></B></A>
A.prepend(B) 将 B 插入到 A 的内部元素前面
- <A>
- <B></B>
- <C></C>
- <A>
4.2. 外部插入 [掌握]
A.after(B) , 将 B 插入到 A 后面 (同级)
- <A></A>
- <B></B>
A.before(B) , 将 B 插入到 A 前面
4.3. 删除 [掌握]
empty() 清空标签体
remove() 删除当前对象. 如果之后再使用, 元素本身保留, 绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象. 如果之后再使用, 元素本身保留, 绑定事件 或 绑定数据 都保留
4.4. 复制
clone() 克隆
even : 指示事件处理函数是否会被复制. V1.5 以上版本默认值是: false
来源: http://www.bubuko.com/infodetail-2759240.html