jQuery技术

一起来学jquery

字号+ 作者:H5之家 来源:H5之家 2017-05-10 15:09 我要评论( )

jquery学习之旅! ------------jquery书写步骤 ------------jquery事件与函数 ------------jquery修改css属性 ------------jquery修改html属性 ------------jquer

> 脚本语言 > >

一起来学jquery 2017-05-08 17:33 出处:清屏网 人气: 

jquery学习之旅!

------------jquery书写步骤
------------jquery事件与函数
------------jquery修改css属性
------------jquery修改html属性
------------jquery核心:选择器
------------jquery的ajax使用

前言: jquery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库( 或JavaScript框架 )。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery可以兼容各种主流浏览器:如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+、FirefoX 2.0+、Chrome 8+等。总而言之:jquery内容丰富、简单易学,学好jquery,定将使你的web开发如鱼得水!下面直接步入正题:

(一)jquery书写步骤

1,引入jquery文件

在官网下载好jquery文件后,在script中引入jquery文件:

<script src="jquery.js"></script>

//注意:src后的路径为相对路径,根据jquery存放位置的不同而改变 
        2,新建script标签来写jquery

<script src="jquery.js"></script>

<script> jquery代码书写区 </script> 
        3,用jquery代码分离 
        4,按照jquery原则书写代码

①$(document).ready(fn) //$(document)是将dom对象转换为jquery对象

②$(function(){}) //是对上一种方法的封装(常用方法)

③$().ready(fn)     //这种方法内部没有dom对象的组成部分

1)这里注意与js区别: 
①在js中,window.onload=fn 是在把页面上dom和资源加载完成之后执行, 
而jquery是在页面dom加载之后即执行                   

②在同一个请求中,jquery加载事件可以设置多个,而传统js加载方式只能设置一个,若多的话,后者覆盖前者 
原因:传统加载方式是给onload事件属性赋值,jquery加载方式是遍历数组里的元素

2)js对象与jquery对象的转换:

①将jquery对象变为dom对象: 
$('div').style.backgroundColor = "red";        //失败 
$('div')[0].style.backgroundColor = "red";    //成功 $('div')[下标]  的形式 

②将dom对象变为jquery对象: 
var dom对象 = document.getElementsByTagName('div')[0]; 
dom对象.css();        //失败 
$(dom对象).css();    //成功 $(dom对象)  的形式

(二)jquery事件与函数

1,事件:就是什么时候执行什么事

1)事件示例: 

①click:单击事件; dblclick:双击事件 

②mouseover:鼠标移动上去事件 

③mouseout:鼠标离开事件 

④focus:获得焦点事件;  blur:失去焦点事件 

⑤mousedown/up/move 鼠标按下,抬起,移动 

⑥change:发生改变事件 

⑦hover:用法:$("div").hover(function(){},function(){}); 
//这个事件对应鼠标放上和鼠标离开两个事件

2)事件的绑定与解绑:

事件绑定: 
①单个事件绑定:$("div").bind("事件",function(){});

②多个对象绑定多个事件:$("div").bind({"事件":function(){},"事件":function(){}});

③一个对象绑定多个事件:$('div').bind('事件1 事件2 事件3',function(){...});

注意事件与函数之间符号的区别:

①单个事件绑定用的是 ","

②多个对象绑定多个事件: 对象与函数之间用的是 ":"; 多个对象之间用的是 ","

③一个对象绑定多个事件: 事件用一个 空格 隔开;  事件与函数之间用 "," 隔开

解除绑定:

unbind("action") //action为事件参数,如果不写参数,则全部解除绑定

解绑示例 :$("div").unbind("action");

2,函数:封装好的某个功能 函数示例:

1) hide()隐藏

show()显示

               toggle() 切换      注意: 三者都可以传递数字参数控制斜向滑动动画时间(1000ms = 1s) 2) slideUp() 竖直向上滑动动画

slideDown() 竖直向下滑动动画

 

slideToggle() 切换动画 
3) fadeIn() 淡入

fadeOut() 淡出

fadeTo() 可以实现半透明 

示例:fadeTo(500,0.5)  //第二个参数是透明度的设置(0~1)

    fadeToggle() 切换     注意: 在使用jquery时,动画和事件会出现 排队现象 (即:如果一次执行了很多动画,后面的动画不会替换前面的,而是排队等待执行)

这时我们可以使用插队方法进行解决:

示例:$(this).children().stop().slideUp(); 加一个 .stop() 即可解决

4)

setInterval(): // 可按照指定的周期(以毫秒计)来调用函数或计算表达式

示例: $(function(){

setInterval("f1()",2000);

})

(三)jquery修改css属性

1,jquery可以获取行内、内部、外部的样式 
2,js dom方式只能获得行内样式 
3,包含多种属性样式的需要拆分为具体样式进行获取

1)css属性获取及修改:

①css单属性获取:alert($('div').css('height'))

②css单属性修改:$('div').css('属性名','属性值')

③ css多属性修改:$('div').css({'属性名':'属性值','属性名':'属性值',...})

注意! 在书写css复合属性时,要采用驼峰式命名!

示例: background-color应写为backgroundColor

④ .animate({属性名:'属性值'},500)

// 动态的css方法,允许创建自定义的动画,可以用来操作多个css属性,使用队列功能,方法将逐一被调用,后续会加入示例。。

2)css类:

       ① 添加类:addClass(className)

示例:$("div").addClass("abcd");//注意:只是添加,覆盖了之前的而没有删除之前的

②删除类:removeClass(className)

③切换类:toggleClass(className)

示例:$("div").toggleClass("ab");//有"ab"属性就隐藏,没有就添加

(四)jquery修改html属性

1,获取html内容(包括格式):

$('div').html()   [innerHtml]

$('div').html('代码')代码可以识别文本、标签 
2,获取html文本内容 :

$('div').text()   [innerText]

$('div').text(代码)设置文本内容  //注意:   如果内容中有标签,会将这些标签当作文本处理

注意:没括号的话是获取信息,有括号是修改信息的值

3,DOM文档处理: 1)内部插入(父子级关系):

①$(a).append($(b)) 把b插入a中 ②$(b).appendTo($(a)) 把b插入到a中

//注意: 这两个都是插入到a里面的后面

与prepend区分,是插入到a里面的前面

//注意: 若是已有节点追加,则发生位置移动,即旧节点被移除

2)外部插入(兄弟级关系):

①$(a).after($(b)) 把b插入到a外面的后面 ②$(b).insertAfter($(a)) 把b插入到a外面的后面

//注意: 与before区分,是插入到a外面的前面

//注意: 若是已有节点追加,则发生位置移动,即旧节点被移除

3)包裹:wrap

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery选择器 事件及常用方法视频教程

    jQuery选择器 事件及常用方法视频教程

    2017-05-11 11:01

  • jQuery如何工作

    jQuery如何工作

    2017-05-10 13:15

  • 30个经典的jQuery代码开发技巧【站长博客网】

    30个经典的jQuery代码开发技巧【站长博客网】

    2017-05-10 13:13

  • jQuery提示通知插件jBox

    jQuery提示通知插件jBox

    2017-05-10 11:11

网友点评
c