jQuery语法
基础语法:$(selector).action() ;
工厂函数$():将DOM对象转化为jQuery对象
选择器selector:获取需要操作的DOM 元素
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法
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( );
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);
选择器获取元素
了解:
jQuery选择器类似于CSS选择器,用来选取网页中的元素
分类:
基本选择器
标签选择器element
类选择器 .class
ID选择器 #id
并集选择器
selector1,selector2,...,selectorN
全局选择器 *
层次选择器
后代选择器ancestor descendant
$(".textRight p").css("color","red");
子选择器parent>child
$(".textRight>p").css("color","red");
相邻元素选择器prev+next
$("h1+p").css(text-decoration","underline");
同辈元素选择器prev~sibings
$("h1~p").css("text-decoration","underline");
属性选择器
选取给定属性是以某些特定值开始的元素[attribute^=value]
选取给定属性是以某些特定值结尾的元素 [attribute$=value]
选取给定属性是以包含某些值的元素 [attribute*=value]
1.根据属性名获取元素
属性选择器可以根据是否包含某属性来选取元素
a标签带有class属性
$("#news a[class]").css("background","#c9cbcb");
2.根据属性值获取元素
属性选择器可以根据属性的值来选取元素
class属性值为hot
$("#news a[class='hot']").css("background","#c9cbcb");
属性选择器可以指定选取不等于属性是某个特定值的元素
class值不等于hot
$("#news a[class!='hot']").css("background","#c9cbcb");
根据属性值包含特定的值获取元素
属性选择器可以指定属性值以指定值开头的元素
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.定义:通过特定的过滤规则来筛选出所需的元素
分类:
基本过滤选择器
: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();
常用事件分类
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
click( ) :$(selector).click(function)
mouseover( ):$(selector).mousemove(function)
mouseout( ):$(selector).mouseout(function)
mouseenter( ):$(selector).mouseenter(function)
mouseleave( ):$(selector).mouseleave(function)
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件
keydown( ):$(selector).keydown(function)
keyup( ):$(selector).keyup(function)
keypress( ):$(selector).keypress(function)
浏览器事件
调整窗口大小时,完成页面特效
$(selector).resize( );
移除事件
$(selector).unbind(event,function)
参数:event
可选。规定删除元素的一个或多个事件
由空格分隔多个事件值。
如果只规定了该参数,则会删除绑定到指定事件的所有函数。
Function
可选。规定从元素的指定事件取消绑定的函数名。
复合事件
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。