JQuery是一个JavaScript的框架,是对JavaScript的一种封装。
一. 基础知识点
- 使用jquery前需导入jquery.min.js
- 文档加载
为了防止在完全加载之前就运行了JQuery代码,有以下两种方式
$(function(){
});
或
$(document).ready(function(){
});
-
通过id获取元素
通过$("#id")
就可以获取
document.getElementById(“id”)获取的是元素节点
$(#id)获取的是jquery对象 -
增加监听器
JavaScript需要在html元素上增加监听事件,而JQuery不需要在html元素上进行操作,故维护更方便
$("#btn").click(function(){
alert(“点击事件”);
}); -
隐藏与显示
取到div对象后,直接调用内置的hide()和show()方法
$(function(){
$("#btn1").click(function(){
$("#div1").hide();
});
$("#btn2").click(function(){
$("#div1").show();
});
})
二.常用方法
1.取值通过val()方法获取值
$("#test").val()
相当于document.getElementById(“test”).value
2.获取元素内容
- html():获取元素内容,如果有子元素,保留子元素标签
- text():获取元素内容,如果有子元素,不保留子元素标签
三. 操作CSS
- 增加class
通过addClass() 增加一个样式中的class
例:
<script>
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink"); //添加样式
});
});
</script>
<button id="b1">增加背景色</button>
//创建pink样式
<style>
.pink{
background-color:pink;
}
</style>
-
删除class
通过removeClass()删除一个样式中的class
操作同addClass() -
切换class
通过toggleClass() 切换一个样式中的class
操作同addClass()
若存在,就删除
若不存在,就添加 -
css函数
通过css函数直接设置样式
css(“样式属性”:“样式值”,“样式属性”:“样式值”)
$("#d").css(“background-color”:“black”,“color”:“green”);
注:属性和值都要用引号"包含起来
四. 选择器
-
元素选择器
$(“tagName”)
选择所有该标签的元素 -
id选择器
$("#d")
根据id选择元素,id是唯一的,如果id重复则只会选择第一个 -
类选择器
$(".className")
根据class选择元素,选择所有className相同的元素 -
层级选择器
$(“selector1 selector2”)
选择selector1下的selector2元素
$(“div#div1 span”) -
最先、最后选择器
- $(“selector:first”):选择满足选择器条件的第一个元素
- $(“selector:last”):选择满足选择器条件的最后一个元素
例:
$(".test:first")
- 奇偶选择器
- $(“selector:odd”):选择满足选择器条件的奇数元素
- $(“selector:even”):选择满足选择器条件的偶数元素
注:因为是基零的,所以第一个的下标其实是0(偶数)
例:
$(".test:odd")
- 可见性选择器
- $(“selector:hidden”):选择满足选择器条件的不可见元素
- $(“selector:visible”):选择满足选择器条件的可见元素
注:div:visible和div :visible(有空格)是不同的
div:visible表示选择可见的div
div :visible(有空格)表示选择div下可见的元素
例:
$(“div:visible”)
- 属性选择器
- $(selector[attribute]): 满足选择器条件且有某属性的元素 $(“div[id]”)
- $(selector[attribute=value]): 满足选择器条件的属性等于value的元素 ( " d i v [ i d = ′ t ′ ] " ) 注 : 一 般 不 使 用 [ c l a s s = c l a s s N a m e ] 而 应 该 使 用 . c l a s s N a m e , 如 ("div[id='t']") 注:一般不使用[class=className]而应该使用.className,如 ("div[id=′t′]")注:一般不使用[class=className]而应该使用.className,如(“div.test”)
- $(selector[attribute!=value]): 满足选择器条件的属性不等于value的元素
- $(selector[attribute^=value]): 满足选择器条件的属性以value开头的元素
- ( s e l e c t o r [ a t t r i b u t e (selector[attribute (selector[attribute=value]): 满足选择器条件的属性以value结尾的元素
- $(selector[attribute*=value]): 满足选择器条件的属性包含value的元素
-
表单对象选择器
表单对象选择器指的是选中form下会出现的输入元素
:input 会选择所有的输入元素,不仅仅是input标签开始的那些,还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox 会选择复选框
:text 会选择文本框,但是不会选择文本域
:submit 会选择提交按钮
:image 会选择图片型提交按钮
:reset 会选择重置按钮 -
表单对象属性选择器
:enabled 会选择可用的输入元素 注:输入元素的默认状态都是可用
:disabled 会选择不可用的输入元素
:checked 会选择被选中的单选框和复选框 注:checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected 会选择被选中的option元素 -
当前元素选择器
$(this)即表示触发该事件的组件
五. 筛选器
筛选器指的是在已经通过选择器选中元素后,在此基础上进一步选择。
-
筛选第一个、最后一个、第几个
首先通过$(“div”)选择多个div元素,接下来进一步筛选
first() 第一个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0
$(“div”).first() -
筛选父、祖先
- parent() 选取最近的一个父元素
- parents() 选取所有的祖先元素
例:
$("#div1").parent()
- 筛选儿子和后代
- children() 筛选出紧挨着的儿子元素,隔着的无效
- find(selector) 筛选出后代元素
注:find必须使用参数seletor
例:
$("#div1").find(“span”)
- 筛选同级
siblings() 筛选出同级(同胞)元素
$("#div1").siblings()
六. 属性
-
获取属性
attr(“属性名”)
通过attr()获取一个元素的属性
例:
$("#test").attr(“align”) //获取id为test的元素的align属性 -
修改属性
attr(“属性名”,“属性值”)
将属性名为"属性名"的属性值修改为"属性值" -
删除属性
removeAttr(“属性名”)
删除属性名为"属性名"的属性 -
prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。区别在于,对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性。 -
对于自定义属性 attr能够获取,prop不能获取
-
对于选中属性
attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true|false的布尔型返回。所以在访问表单对象属性的时候,应该采用prop而非attr
七. 效果
- 显示 隐藏 切换
- show() 显示
- hidden() 隐藏
- toggle() 切换
注:也可以加入毫秒数,表示延时操作
例:$("#test").toggle(1000)
- 向上滑动 向下滑动 滑动切换
- slideUp() 向上滑动(相当于向上隐藏)
- slideDown() 向下滑动(相当于向下显示)
- slideToggle() 滑动切换(相当于上下切换)
注:使用方法同上
- 淡入 淡出 淡入淡出切换 改变透明度
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 淡入淡出切换
- fadeTo(“改变速率”,透明程度) 改变透明度 速率=“fast” or “slow” 透明程度=0~1
例:
$("#test").fadeTo("slow",0.5); //将id为test的元素的透明程度改为50%
$("#test").fadeToggle(1000);
-
自定义动画效果
animate({css样式},延时秒数)
注: 默认情况下,html中的元素都是固定,并且无法改变的位置的。 为了使用animate()自定义动画效果,需要通过css把元素的position设置为relative、absolute或者fixed。
例:
$("#test").click(function(){
div.animate({left:‘100px’,top:‘50px’},1000); //向右下移动
}); -
回调函数
效果方法都提供对回调函数的callback()的支持。在调用效果方法的最后一个参数传入一个function,当效果结束的时候,就会自动调用该function了。
例:
div.animate({left:‘100px’,top:‘50px’},1000,function(){alert(“动画演示结束”);});
八. 事件
- 加载
- $(document).ready() 页面加载
- $() 页面加载
- load() 图片加载 $("#test").load(function(){})
- 点击
- click() 表示单击
- dblclick() 表示双击
注:空白键和回车键也可以造成单击事件,但只有双击鼠标才能造成dblclick事件
- 键盘
- keydown 表示按下按键
- keypress 表示按下按键
- keyup 表示键盘弹起
三者之间的区别:
*先后顺序:keydown - keypress - keyup
*键盘按键值:
通过event对象的which属性获取键盘的值 如:
$("#kt").keyup(function(e){$("#test").html(e.which);})})
keydown和keyup可以获取按键,不能识别大小写
keypress可以识别大小写,不能获取功能键,如F1和shift等
*文本取值:keydown和keypress不能获取输入的最后一个字符,keyup可以获取输入的所有字符
- 鼠标
- mousedown 表示鼠标按下
- mouseup 表示鼠标弹起
- mousemove 表示鼠标进入元素,每移动一下都会被调用
- mouseenter 只在鼠标进入元素时调用一次,在其中移动不调用,经过其子元素不调用
- mouseover 只在鼠标进入元素时调用一次,在其中移动不调用,经过其子元素调用
- mouseleave 只在鼠标离开元素时调用一次,经过其子元素不调用
- mouseout 只在鼠标离开元素时调用一次,经过其子元素调用
- 焦点
- focus() 获取焦点
- blur() 失去焦点
-
改变
change() 内容改变
注:对于文本框而言,只有当该文本失去焦点的时候,才会触发change事件 -
提交
submit()
提交form表单 -
绑定事件
$(“selector”).on(“event”,function);
以上所有的事件处理,都可以通过on()绑定事件来处理
例:
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
});
- 触发事件
文档加载好后,就触发事件
$(“selector”).trigger(“event”);
例:
$(function(){
$("#b").on("click",function(){
$("#message").html("单击按钮");
});
$("#b").on("dblclick",function(){
$("#message").html("双击按钮");
});
$("#b").trigger("dblclick"); //文档加载好之后就触发dblclick事件
});
九. 操作数组
-
遍历数组
$.each(数组名,function(i,n))
第一个参数是数组名,第二个参数回调函数,i是下标,n是内容
var a = new Array(1,2,3);
$.each(a,function(i,n){
document.write(“a[”+i"]="+n);
}) -
去处数组重复值
$.unique(数组名)
注:执行unique之前,要先调用sort对数组内容进行排序 -
判断是否存在某值
$.inArray(值,数组名)
如果存在就返回该值在数组中的位置,否则返回-1
十. 操作字符串
去除首尾空白
$.trim(字符串)
例:
var a = " hello jquery ";
$.trim(a);
var b = " how are you ";
$.trim(b);
十一. 对象转换
JOuery对象具有DOM对象不具备的方法
DOM对象也具备JQuery对象没有的属性和方法
故需要对两者进行相互转换
-
JQuery转DOM
通过get(0)或者[0]把JQuery对象转化为DOM对象
var a = $("#test"); //JQuery对象
var b = a[0]; //DOM对象 -
DOM转JQuery
通过$()把DOM对象转换为JQuery对象
var a = document.getElementById(“test”); //DOM对象
var b = $(a); //JQuery对象