JQuery是一个JavaScript的框架，是对JavaScript的一种封装。
一. 基础知识点
使用jquery前需导入jquery.min.js
文档加载
为了防止在完全加载之前就运行了JQuery代码,有以下两种方式1234567$(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();
});
})
二. 常用方法
取值
通过val()方法获取值
$(“#test”).val()相当于document.getElementById(“test”).value获取元素内容
- html():获取元素内容，如果有子元素，保留子元素标签
- text():获取元素内容，如果有子元素，不保留子元素标签
div里的内容
span里的内容
$(“#id”).html(); //返回:div里的内容span里的内容
$(“#id”).text(); //返回：div里的内容span里的内容
三. 操作CSS
增加class
通过addClass() 增加一个样式中的class
例：1234567891011121314<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的元素 $(“div[id=’t’]”)
注：一般不使用[class=className]而应该使用.className,如$(“div.test”) - $(selector[attribute!=value]): 满足选择器条件的属性不等于value的元素
- $(selector[attribute^=value]): 满足选择器条件的属性以value开头的元素
- $(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对象
最后更新： 2020年07月27日 03:40