jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理） 二、选择器【重要】 三、属性和CSS 四、文档处理
一、jQuery简介
1.1. JS库
JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。
1.2. 当前流行的 JavaScript 库有：
① jQuery ，最流行
② EXT JS，2.0开始收费
③ Prototype，对js扩展，框架开发。
④ Dojo
⑤ 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对象 约定变量名前加上$符号 var $divObj = $("#mydiv");
//把jquery对象转为dom对象 var divObj = $divObj.get(0); //divObj.html('hhhh '); divObj = $divObj[0]; //document.getElementById("mydiv"); divObj.innerHTML ='hello'; //js中的dom对象 转成 jquery中的对象 var divObj2 = document.getElementById("mydiv");
//转化为jquery对象 var $divObj2 = $(divObj2);
$divObj2.html("hehehheheheheeh");
}); |
2.1基本选择器【重要】 跟css中的选择器对应
#id ， id选择器，<xxx > 通过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属性【掌握】
[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