JQuery基础
1.概念:快速简洁的Javascript框架,简化js开发
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的 JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less, Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.快速入门
1.版本问题
1.x 兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4
2.x 不兼容ie678,很少人使用,官方只做bug维护,功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x,最终版本:2.2.4
3.x 不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
2.JQuery-xxx.js 与 JQuery.min.js
- JQuery-xxx.js:开发版本。给程序员看的
- JQuery.min.js:生产版本,程序使用。
3.使用$()获取,括号里面是选择器
4.js与jq对象的相互转换
1.两者的的对象方法是不通用的
- jq -> js: jq对象[索引]或者jq对象.get(索引)
js ->jq: $(js对象)
3.选择器
1.基本选择器
1.标签(元素)选择器 *语法: $("html标签名") 2.id选择器 *语法: $("id属性值") 3.类选择器 *语法: $(".class的属性值") 4.并集选择器 *语法: $("选择器1,选择器2.....") --以上都能获取与之匹配的元素
2.层级选择器
1.后代选择器 *语法: $("A B") 选择A元素内的所有B元素(包含孙子辈) 2.子选择器 *语法: $("A > B") 选择A元素内的所有B子元素(只有儿子辈)
3.属性选择器
1.属性名称选择器 *语法:$("A[属性名]") 包含指定属性的选择器 2.属性选择器 *语法:$("A[属性名='值']") 包含指定属性等于属性值选择器 3.复合属性选择器 *语法:$("A[属性名='值'][ ]...") 包含多个属性的选择器 4. ^以什么开始 $以什么结束 *包含什么 例: div[title*='abc']
4.过滤选择器
1.首元素选择器 *语法:first 获得选择的元素中的第一个 2.尾元素选择器 *语法:last 获得选择中的最后一个 3.非元素选择器 *语法:not(selector)不包含指定内容的元素 4.偶数选择器 *语法: even偶数,从0开始计数 5.奇数选择器 *语法:odd 奇数,从0开始计数 6.等于索引选择器 *语法:eq(index)指定索引元素 7.大于索引选择器 *语法:gt(index)大于指定索引元素 8.小于索引选择器 *语法:lt(index) 小于指定索引元素 9.标题选择器 *语法:header(h1~h6) 获得标题元素,固定写法
5.表单过滤选择器
1.可用元素选择器 *语法:enabled 获得可用元素 2.不可用元素选择器 *语法:disabled 获得不可用元素 3.选中选择器 *语法:checked 获得单选/复选框选中的元素 *语法:selected 获得下拉框选中的元素
4.DOM操作
1.内容操作
1.html() $().html():获取/设置元素的标签体内容 2.text() $().text():获取/设置元素的标签体纯文本内容 3.val() $().val():获取/设置元素的value属性值
2.属性操作
2.1通用属性操作
1.attr():获取/设置元素的属性 $().attr("",""); <--新增自定义属性,后括号为属性值,prop同理! 2.removeattr():删除属性 3.prop():获取/设置元素的属性 4.removeprop():删除属性 *attr prop区别: prop一般用于操作元素的固有属性 attr一般用于操作元素的自定义属性
2.2对class属性操作
1.addClass():添加class属性值 2.removeClass():删除class属性值 3.toggleClass():切换class属性值 *意思是有变无 无变有,相互转换
3.CRUD操作
1.append():父元素将子元素追加到末尾 *对象1.append(对象2):将对象2添加到对象1元素内部的末尾 2.prepend():父元素将子元素追加到开头 *对象1.append(对象2):将对象2添加到对象1元素内部的开头 3.appendTo():同append *对象1.appendTo(对象2):将对象1添加到对象2元素内部的末尾 4.prependTo():同prepend 5.after():添加元素到元素后边 *对象1.after(对象2):将对象2添加到对象1后边,平行关系 6.before():添加元素到元素前边 7.insertAfter(): *对象1.after(对象2):将对象1添加到对象2后边,平行关系 8.insertBefore(): 9.remove():移除元素,将对象删除掉 10.empty():将对象的后代全部删除,但保留当前对象和他的属性
6.进阶部分
1.动画:三种方式显示和隐藏元素
1.默认显示和隐藏方式
hide:隐藏 show:显示 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); $("button").click(function(){ $("p").hide(1000);//1000为毫秒值 }); toggle:
2.滑动显示和隐藏
3.淡入淡出显示和隐藏
2.遍历
jq.each()
3.事件绑定
1.jq对象.事件方法(回调函数)
2.on/off事件绑定
3.时间切换toggle,jq对象.toggle(fn1,fn2...)-->点击一次,便往下执行一次,执行完跳回第一个。
来源:https://www.cnblogs.com/codezzz/p/12210237.html