一、jQuery语法
1.基础语法:$(selector).action() ;
工厂函数$():将DOM对象转化为jQuery对象
选择器 selector:获取需要操作的DOM 元素
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
2.jQuery 入口函数:
(1)搭建
<scriptsrc="js/jquery-1.12.4.js"type="text/javascript"></script>
(2)执行
$(document).ready(function(){
// 执行代码});或者
$(function(){
// 执行代码});
二、基础方法
1.操作页面元素的方法
元素添加样式:
Query 对象.addClass([样式名]);
设置元素样式
css("属性","属性值") ;//一个css
Css({"属性1":"属性值1","属性2":"属性值2"...}) ;//对个css
设置元素的显示和隐藏
$(selector).show( );
$(selector).hide( );
2.jQuery对象
使用jQuery来获取元素对象: $(“#title”).html( ); 等同于 document.getElementById("title").innerHTML;
DOM对象转化成jQuery对象
使用$()函数进行转化:
var txtName =document.getElementById("txtName");
var $txtName =$(txtName);
在事件中经常使用$(this),this是触发该事件的对象
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName");
var txtName =$txtName[0];
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");
var txtName =$txtName.get(0);
三、选择器获取元素
1.了解:jQuery选择器类似于CSS选择器,用来选取网页中的元素
2.分类
一、基本选择器
标签选择器 element
类选择器 .class
ID选择器 #id
并集选择器 selector1,selector2,...,selectorN
全局选择器 *
二、层次选择器
后代选择器 ancestor descendant
Eg:$(".textRight p").css("color","red");
子选择器 parent>child
Eg:$(".textRight>p").css("color","red");
相邻元素选择器 prev+next
Eg:$("h1+p").css(text-decoration","underline");
同辈元素选择器 prev~sibings
Eg:$("h1~p").css("text-decoration","underline");
三、属性选择器
选取给定属性是以某些特定值开始的元素 [attribute^=value]
选取给定属性是以某些特定值结尾的元素 [attribute$=value]
选取给定属性是以包含某些值的元素 [attribute*=value]
1.根据属性名获取元素
属性选择器可以根据是否包含某属性来选取元素
Eg:a标签带有class属性
$("#news a[class]").css("background","#c9cbcb");
2.根据属性值获取元素
属性选择器可以根据属性的值来选取元素
Eg:class属性值为hot
$("#news a[class='hot']").css("background","#c9cbcb");
属性选择器可以指定选取不等于属性是某个特定值的元素
Eg:class值不等于hot
$("#news a[class!='hot']").css("background","#c9cbcb");
根据属性值包含特定的值获取元素
属性选择器可以指定属性值以指定值开头的元素
Eg:A标签href属性值以www开头
$("#news a[href^='www']").css("background","#c9cbcb");
属性选择器可以指定属性值以指定值结尾的元素
a标签href属性值以html结尾
$("#news a[href$='html']"). css("background","#c9cbcb");
属性选择器可以指定属性值包含指定值的元素
a标签href属性值包含“k2”的元素
$("#news a[href*='k2']").css("background","#c9cbcb");
四、过滤选择器
1.定义:通过特定的过滤规则来筛选出所需的元素
2.分类
1)基本过滤选择器
:eq(index)选取索引等于index的元素(index从0开始
:gt(index) 选取索引大于index的元素(index从0开始
:lt(index) 选取索引小于index的元素(index从0开始
:header 选取所有标题元素,如h1~h6
:focus 选取当前获取焦点的元素
:animated 选择所有动画
五、可见性过滤选择器
:visible 选取所有可见的元素
$("p:hidden").show();
:hidden 选取所有隐藏的元素
$("p:visible").hide();
四、事件
1.常用事件分类
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击
2.各事件方法
1.鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
click( ) :$(selector).click(function)
mouseover( ):$(selector).mousemove(function
mouseout( ):$(selector).mouseout(function)
mouseenter( ):$(selector).mouseenter(function)
mouseleave( ):$(selector).mouseleave(function)
2.键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件
keydown( ):$(selector).keydown(function)
keyup( ):$(selector).keyup(function)
keypress( ):$(selector).keypress(function)
3.浏览器事件
调整窗口大小时,完成页面特效
$(selector).resize( );
4.移除事件
$(selector).unbind(event,function)
参数:event
可选。规定删除元素的一个或多个事件
由空格分隔多个事件值。
如果只规定了该参数,则会删除绑定到指定事件的所有函数。
Function
可选。规定从元素的指定事件取消绑定的函数名。
1.复合事件
hover( )方法
相当于mouseover与mouseout事件的组合
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数
mouseover与mouseout,如果只指定一个函数,则 mouseenter 和 mouseleave 都执行它
hover(enter,leave);
toggle( )方法
切换元素的可见状态。
toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件
$(selector).toggle(speed,callback,switch)
Speed
规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。
可能的值:
- 毫秒 (比如 1500)
- "slow"
- "normal"
- "fast"
在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数,则无法使用 switch 参数。
Callback 当动画 100% 完成后,即调用 Callback 函数,除非设置了 speed 参数,否则不能设置该参数。
Switch,布尔值,规定 toggle 是否隐藏或显示所有被选元素。
- True - 显示所有元素
- False - 隐藏所有元素
toggleClass()
class
对设置或移除被选元素的一个或多个类进行切换。
必需。规定添加或移除 class 的指定元素。
如需规定若干 class,请使用空格来分隔类名。
Switch 可选。布尔值。规定是否添加或移除 class。