jQuery入门

最新推荐文章于 2024-07-04 10:38:01 发布

Zero L

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量139

点赞数

文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/sinat_38930182/article/details/87937041

版权

复习jQuery之际，对jQuery的知识点做个整理。

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more

官网：http://jquery.com

jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

jQuery使用步骤

引入jquery文件
入口函数——$(document).ready(function) or $(function)(){})
功能实现

jQuery操作页面元素

使用addClass( )方法为元素添加样式——
jQuery 对象.addClass([样式名]);
使用css( )方法设置元素样式——
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;

使用show( )、hide( ) 方法设置元素的显示和隐藏——

$(selector).show( );
$(selector).hide( );

jQuery代码风格

链式操作——对一个对象进行多重操作，并将操作结果返回给该对象

示例： $("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代

示例：

$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});

DOM对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

jQuery对象：使用jQuery包装DOM对象后产生的对象

区别：不能混用

联系：DOM-->jQuery $(DOM对象)

jQuery-->DOM jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象，也通过get(index)方法得到相应的DOM对象例： $li[0] or $li.get(0)

jQuery选择器

通过CSS选择器选取元素

基本选择器:

名称	示例
标签选择器	$("h2" )选取所有h2元素
类选择器	$(" .title")选取所有class为title的元素
ID选择器	$(" #title")选取id为title的元素
并集选择器	$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器	$("*" )选取所有元素

层次选择器:

名称	示例
后代选择器	$("#menu span" )选取#menu下的<span>元素
子选择器	$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

属性选择器：

语法构成	示例
[attribute^=value]	$(" [href^='en']" )选取href属性值以en开头的元素
[attribute$=value]	$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]	$(" [href* ='txt']" )选取href属性值中含有txt的元素

通过过滤选择器选择元素

基本过滤选择器：

语法	示例
:eq(index)	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	$(":header" )选取网页中所有标题元素
:focus	$(":focus" )选取当前获取焦点的元素
:animated	$(":animated" )选取当前所有动画元素

可见性过滤选择器：

语法	示例
:visible	$(":visible" )选取所有可见的元素
:hidden	$(":hidden" ) 选取所有隐藏的元素

jQuery选择器注意事项

——特殊符号的转义

获取这两个元素的选择器

$("#id\\#a");

$("#id\\[2\\]");

jQuery中的事件

基础事件

鼠标事件：鼠标在其被选元素的子元素上来回进入时：触发mouseover( )，不触发mouseenter；鼠标在其被选元素的子元素上来回离开时：触发mouseout，不触发mouseleave
方法执行时机

click( )

单击鼠标时

mouseover( )

鼠标指针移过时

mouseout( )

鼠标指针移出时

mouseenter( )
鼠标指针进入时
mouseleave( ) 鼠标指针离开时

键盘事件

方法	描述	执行时机
keydown( )		按下键盘时
keyup( )		释放按键时
keypress( )	keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

window事件
表单事件

复合事件

hover( )方法：相当于mouseover与mouseout事件的组合
示例：$(".top-m .on").hover(function(){
   $(".topDown").show();
          },
         function(){
   $(".topDown").hide();
         }
);
toggle( )方法：
示例：$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )

绑定事件与移除事件

绑定单个事件

$(document).ready(function(){
   $(".on").bind("mouseover",function(){
       $(".topDown").show();
   });
});

绑定多个事件

$(".top-m .on").bind({
   mouseover:function(){
       $(".topDown").show();
   },
   mouseout:function(){
       $(".topDown").hide();
   }
});

移除事件

unbind([type],[fn])

注意：当unbind()不带参数时，表示移除所绑定的全部事件

jQuery动画效果

show() 控制元素的显示，hide( )控制元素的隐藏
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏
自定义动画：$(selector). animate({params},speed,callback)，其中params必须，定义形成动画的CSS属性

使用jQuery操作 DOM

样式操作

css( )获取和设置样式
addClass( )追加样式
removeClass( )移除样式
toggleClass( )切换样式

内容操作

html( )代码操作
text( )内容操作
val( )属性值操作

节点操作

查找节点
创建节点元素
插入节点
删除节点
替换节点
复制节点

属性操作

attr( )获取和设置元素属性
removeAttr( )删除元素属性

节点遍历

遍历子元素：children( )
遍历同辈元素：next( )、prev( )、siblings( )
遍历前辈元素：parent( )、parents( )
其他遍历方法：each( ) 、end( )、find( )、eq( )、first( )…

表单校验

为什么要表单验证？

减轻服务器的压力
保证输入的数据符合要求

方法	执行时机
click( )	单击鼠标时
mouseover( )	鼠标指针移过时
mouseout( )	鼠标指针移出时
mouseenter( )	鼠标指针进入时
mouseleave( )	鼠标指针离开时