JQuery 基础
-
概念
一个javaScript框架,简化JS开发
jQuery是一个快速,简洁的javaScript框架,是继prototype之后又一个优秀的javaScript代码库,jQuery设计的宗旨是“write less,do more”,即倡导写更少的代码,做更多的事情。它封装javaScrip常用的功能代码,提供一种简便的javaScrip设计模式,优化HTML文档操作,事件处理,动画设计和Ajax交互。
javaScrip框架:本质上就是一些js文件,封装了js的原生代码而已
-
快速入门
步骤:
下载jquery
JQuery有三个版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增,一般项目就可以了
2.x:不兼容ie678,很少人使用,官方只做BUG维护,功能不再增加,如果部考虑低版本就可以使用
3.x:兼容ie678,只支持最新游览器,除非特殊要求,很多旧的插件不支持这个版本
jquery-xxxx.js:开发版,给程序员看的,有良好阅读性
jquery-xxxx.min.js:生产版本。程序使用,没有缩进,体积小,程序加载更快
导入JQuery的js文件:
如果没有文件的话就到官网进行下载,在idea的web文件下的js文件导入就行
使用
<div id="div1">div1....</div> <script> var a=$("#div1"); alert(a.html()); </script>
-
JOuery对象和JS区别和转换
<div id="div1">div1....</div> <div id="div2">div2.....</div> <script> var b=document.getElementsByTagName("div"); alert(b) for(var i=0;i<b.length;i++){ b[i].innerHTML="bbb"; }
上面是用js的方式获得元素,b为object htmlcollection,用JQ则是object object,两者都可以当作数组
jq的对元素内容的设置不用遍历如:
var a=$("div"); a.html("ccc");
所以jq要比js使用简单,当然要如果使用对方的方法在正常情况下是不可能的,隔离的,但可以通过转换来使用对方的方法
js->jq 为$(js的对象),jq->js为jq对象[索引]或者jq对象.get(索引)
-
选择器
基本语法学习:事件绑定,入口函数,样式
**事件绑定:**就当执行某个操作就会发生什么回事,有点类似于数据库中的触发器
<div id="div1">div1....</div> <div id="div2">div2.....</div> <input type="button" value="点我" id="bi"> <script> /* var b=document.getElementsByTagName("div"); alert(b) for(var i=0;i<b.length;i++){ b[i].innerHTML="bbb"; } var a=$("div"); alert(a);*/ $("#bi").click(function () { alert("abc"); });
入口函数:
上面例子中的事件方法在实际上有很多种
//这个为dom文档加载完成之后执行函数中的代码 window.οnlοad=function () { $("#bi").click(function () { alert("ccccc"); }); }
也可以是下列
$(function () { $("#bi").click(function () { alert("ccccc"); }); });
但是window.onload只能定义一次,如果定义多次后面会将前面掩盖掉,但是$()可以多次
样式
$(function () { $("#bi").click(function () { $("#div1").css("background-color","red"); }); });
用来筛选元素对象
选择器分类:
基本选择器:
元素选择器: ( " d i v " ) , ∗ ∗ 类 选 择 器 ∗ ∗ : ("div"),**类选择器**: ("div"),∗∗类选择器∗∗:(".div1"),id选择器:KaTeX parse error: Expected 'EOF', got '#' at position 2: (#̲div1),**并集选择器:*…("#div1","#div2")
层级选择器:
后代选择器: ( " A B " ) ∗ ∗ 子 选 择 器 : ∗ ∗ ("A B") **子选择器:** ("AB")∗∗子选择器:∗∗(“A>B”)
属性选择器:
属性名称选择器:$(“A[属性名]”)
属性选择器:$(“A[属性名=“值”]”)
复合属性选择器:$(“A[属性名=“值”] [ ]…”)
过滤选择器
首元素选择器:first 获取选择的元素的第一个元素,$(“div:first”)
尾元素选择器:last 获取选择的元素的最后一个元素
非元素选择器:not(selector)不包括指定内容的元素
偶数选择器:even 偶数,从0开始计数
奇数选择器:odd 奇数,指定索引元素
等于索引选择器:eq(index) 指定索引元素
大于索引选择器:gt(index)大于指定索引元素
小于索引选择器:lt(index)小于指定索引元素
标题选择器:header 获得标题元素,固定写法
表单过滤选择器
可用元素选择器:enable 获得可用元素 $(“div:enable”).val(“aaaa”)
不可用元素选择器:disabled 获得不可用元素
选中选择器:checked获得单选/复选框选中的元素
选中选择器:selected 获得下拉框选中的元素
-
DOM操作
内容操作:
html();获取/设置元素的标签内容
text();获取/设置元素的标签体纯文本
val();获取/设置元素的value属性值
属性操作:
通用属性操作:
1.attr()
2.ewmoveAttr()
3.prop()
4.removeprop()
两者区别:如果是固有属性则使用prop(),如果使用自定义属性使用attr()
对class属性操作
addclass()添加class属性值
removeclass()删除class属性值
toggleclass()切换class属性,有就删除没有就添加
creud操作:
append():父元素将子元素追加到未尾
prepend()父元素将子元素追加到开头
appendto():将对象1将对象2添加到内部,并且在尾部
prependto(),将对象1将对象2添加到内部,并且在头部
after():添加元素到元素2后面
before(),添加元素到元素2前面
insertafter()添加元素到元素2后面
insertbefore,添加元素到元素2前面
remove()移除元素
empty()清空元素所有后代元素