首页 > 代码库 > 一起来学jquery!
一起来学jquery!
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="http://www.mamicode.com/jquery.js"></script>
//注意:src后的路径为相对路径，根据jquery存放位置的不同而改变
2，新建script标签来写jquery
<script src="http://www.mamicode.com/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
①$(a).wrap($(b)) 把a用b包裹起来(每个元素都会包裹) unwrap不包裹
②wrapAll: 包裹所有(所有元素包裹在一起)
③wrapInner: 内部包裹(会包裹指定元素的下一级)
4)替换:replaceWith
①$(a).replaceWith($(b)) 用b替换a
②replaceAll $(a).replaceAll($(b)) 用a替换b
//旧节点替换也是位置移动
5)删除:empty
①empty 删除父节点下的子节点(不包括父节点)
②remove 删除指定的节点
6)克隆:clone(复制) 将内容复制一份
①var a = $(‘b‘).clone(false); //只复制节点，不包括事件;
②var a = $(‘b‘).clone(true); //复制节点和其事件;
7)attr()的使用:
①元素.attr();获取属性
②元素.attr(attr,value);设置属性
示例 $("input").attr("value"); //获取
$("input").attr("value","abcd"); //设置
③元素.attr({value:"zhi",type:"zhi"});设置多个属性的方法
注意:jquery中不允许在attr中修改或删除type属性
8)val()的使用:
val()在复选框（checkbox）中的使用demo:
1)获取(被选中复选框的value值)
①获得全部的被选中复选框元素节点对象
②遍历全部的被选中复选框
③如果有选中就获得其value值
function f1(){ var s = ""; for(var i = 0;i<$(‘input:checked‘).length;i++){ s+=$(‘input:checked:eq(‘+i+‘)‘).val()+","; } s = s.substr(0,s.length-1);//去除最后的"," console.log(s); }
2)设置(复选框中的含某些value值的项目被选中)
function f2(){ $(‘input‘).val([1,2,4]); }
//注意:下拉列表(select option)和单选按钮(radio)的val()获取不需要遍历，直接使用$(‘‘).val()即可
后续会增加each的用法，便可省去循环遍历的麻烦！
（五）jquery核心:选择器
（六）jquery的ajax使用
作者：一小白
出处：http://www.cnblogs.com/wccc/
本文版权归作者和博客园共有，欢迎转载，但未经本人同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
一起来学jquery!