javascript类库 就是对js的一些常用的函数和对象进行封装，方便用户使用，且兼容性相当好 document.getElementById() function g(value){ return document.getElementById(value); } 常见的js类库： jquery：轻量级 ExtJs:收费 重量级的 BootStrap:响应式js类库 jquery的导入 通过script标签的src属性导入即可 <script type="text/javascript" src="jquery路径"></script> jquery对象的获取 通过$(选择器)就可以获取jquery对象 jquery对象和dom对象之间的转换 dom===>jquery 通过$(dom对象)就可以转换成jquery对象 jquery===>dom jquery可以看成是一个数组 方式1： 通过jquery对象.get(索引) 方式2： 通过jquery对象[索引] 选择器： 基本选择器： id选择器 $("#id值") class选择器 $(".class值") 元素选择器 $("标签名") 全部选择器 $("*") 选择多个，多个选择器用","分隔 $("#id值,.calss值") 基层选择器： 子孙关系 a b $("a b"):所有的后代 父子关系 a>b $("a>b"):a下的所有b孩子 下一个兄弟 a+b $("a+b"):a后面的第一个兄弟 后面所有兄弟 a~b $("a~b"):a后面的小弟 基本过滤选择器： ☆ :first :last :not(selector) :even 索引为偶数的 :odd 索引为奇数的 :eq(index) 等于 :gt(index) 大于 :lt(index) 小于 (了解) :header 标题 针对h标签 :animated 执行动画 :focus 获取焦点 内容过滤选择器：☆ :contains(text) 包含指定内容 例如：选取含有文本“di”的div元素 $("div:contains(‘di‘)") :empty 没有子节点的元素 节点：元素节点 属性节点 文本节点 文档节点document 例如：选取不包含子元素(或者文本元素)的div空元素 $("div:empty") :has(selector) 含有指定节点 例如：选取含有class为mini元素 的div元素 $("div:has(.mini)") :parent 有子节点的元素 例如：选取含有子元素(或者文本元素)的div元素 $("div:parent") 可见性过滤选择器：☆ :hidden 不可见的元素(主要指 display:none input type="hidden") :visible 扩展：遍历 方式1：对象的each方法 对象.each(fn) 方式2:jquery的each方法 $.each(数组,fn) 属性选择器： [attribute]☆ 含有指定属性 [attribute=value]☆ 含有指定属性并且值固定 (了解) [attribute!=value] 指定属性不为指定值(包含没有此属性) [attribute^=value] 属性值以指定内容开头 [attribute$=value] 属性值以指定内容结尾 [attribute*=value] 属性值含有指定内容 [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件才能使用 子元素过滤选择器： :nth-child(序号) 第几个孩子 例如：选取每个class为one的div父元素下的第2个子元素 $("div.one>:nth-child(2)") :first-child 第一个孩子 例如：选取每个class为one的div父元素下的第一个子元素 $("div.one>:first-child") :last-child 最后一个孩子 例如：选取每个class为one的div父元素下的最后一个子元素 $("div.one>:last-child") :only-child 独生子 例如：如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 $("div.one>:only-child") 表单过滤选择器(了解) :input 表单子元素 input select textarea button(等价于 <input type="button"/>) :text 文本框 :password 密码框 :radio 单选框 :checkbox :submit :image :reset :butoon <button>和<input type="button" /> :file :hidden display="none"和type="hidden" 表单对象过滤选择器：☆ :enabled :disabled :checked 单选框和多选框 :selected 下来选 属性和样式 属性 attr():设置或者获取指定的属性 格式1: attr(key):获取指定属性 格式2: attr(key,value):设置属性 格式3: attr(json):设置多个属性 json的格式:{key1:value1,key2:value2} removeAttr(key):移除指定的属性 class的操作 addClass(class的名称):添加class removeClass(class的名称):移除class toggleClass(class的名称):切换class 若有指定的class则移除，否则添加 html代码/文本/值 共同点： xxx():获取 xxx(""):设置 html():设置或获取标签体的内容 text():设置或获取标签体的内容 val():设置或获取value属性 html()和text()区别： 设置值: html会把字符串解析，text作为普通文本 获取值: html会把标签解析，text只获取文本内容 css的操作： css():设置或获取指定css 格式1:相当于操作标签style属性 <xxx style="css"></xxx> css(key):获取指定样式的值 格式2: css(key,value) 格式3: css(json):设置多个样式 offset():获取元素的位置 height(): width(): 文档处理 ☆ 内部插入:(掌握任意一种) append() : a.append(c) 将c内部插入到a的末尾 prepend(): a.prepend(c)将c内部插入到a的前面 appendTo(): a.appendTo(c)将a内部插入到c的末尾 prependTo():a.prependTo(c)将a内部插入到c的前面 外部插入:(掌握任意一种) after(): a.after(c) 在a的后面插入c before(): a.before(c)在a的前面插入c insertAfter(): a.insertAfter(c)将a插入到c的后面 insertBefore():a.insertBefore(c)将c插入到c的前面 删除: empty():清空元素 remove():删除元素 在内存中彻底删除，在元素上绑定的事件和附加的数据都会被移除 detach():删除元素 在内存中不删除，在元素上绑定的事件和附加的数据都不会被移除 克隆 clone([boolean]):克隆 参数若为true,代表把相应的事件一并克隆 (了解) 替换： replaceWith() :a.replaceWith(c) 用c替换a replaceAll() :a.replaceAll(c) 用a替换所有的c 包裹: wrap() a.wrap(html) 用html包裹每一个a wrapAll() a.wrapAll(html) 用html包裹所有的a wrapInner() a.wrapInner(html) 用html包裹a下的所有孩子 unwrap() a.unwrap() 脱去衣服 //注意： window.onload=function(){} 等价于 $(document).ready(function(){ }); $(function(){}) //事件 原生js:document.getElementById("btn1").onclick=function(){} jquery写法：$("#btn1").click(function(){})