1.jquery笔记

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===>domjquery可以看成是一个数组方式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的名称):添加classremoveClass(class的名称):移除classtoggleClass(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的后面插入cbefore(): a.before(c)在a的前面插入cinsertAfter(): a.insertAfter(c)将a插入到c的后面insertBefore():a.insertBefore(c)将c插入到c的前面删除:empty():清空元素remove():删除元素 ?在内存中彻底删除，在元素上绑定的事件和附加的数据都会被移除detach():删除元素 在内存中不删除，在元素上绑定的事件和附加的数据都不会被移除克隆clone([boolean]):克隆参数若为true,代表把相应的事件一并克隆(了解)替换：replaceWith() :a.replaceWith(c) 用c替换areplaceAll() :a.replaceAll(c) 用a替换所有的c包裹:wrap() ?a.wrap(html) 用html包裹每一个awrapAll() a.wrapAll(html) 用html包裹所有的awrapInner() 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(){})