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,函数:封装好的某个功能
函数示例:
3) fadeIn()淡入
fadeOut()淡出
fadeTo()可以实现半透明