jQuery基础体验
来源:互联网 发布:淘宝买东西怎么支付 编辑:程序博客网 时间:2024/05/22 08:17
一、简介
优秀的Js框架,使页面上控制文档、处理事件、实现特效、添加Ajax交互更简单快速。
二、使用方法
在需要用到jQuery的地方引入jQuery相应版本的开发包。
HTML代码:
<script. type="text/javascript" src="js/jquery.js"></script>
jQuery针对不同的功能还有很多的包,可以按需要逐个添加。
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
三、语法总结与注意事项
1、页面元素引用
jQuery的$()操作符可以通过id、class、元素名、元素层次关系、dom等等方式来快捷访问页面元素,而且返回的都是jQuery对象,不能直接调用dom定义的方法。
2、dom对象与jQuery对象的互换
jQuery对象与dom对象的操作使有区别的,操作时要注意!普通的dom对象一般可以用$()转换为jQuery对象。
eg:
$(document.getElementById("msg"))
因为jQuery对象是一个集合。所以jQuery对象要转换为dom对象则必须取出其中的某一项,一般时通过索引来达到目的的!
eg:
$("#msg")[0], $("div").eq(1)[0], $("div").get()[1]
3、获得jQuery对象集合中的某一项
如上面的例子,获得某一项可以采用索引、eq()、get()三种方法,要注意的时eq()返回的时jQury对象,get()和索引返回的是dom对象。
4、多种实现set()、get()的函数
eg:
- $("#msg").html(); //返回id为msg的元素节点的html内容。
- $("#msg").html("<b>new content</b>");
- //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
- $("#msg").text(); //返回id为msg的元素节点的文本内容。
- $("#msg").text("<b>new content</b>");
- //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>
- $("#msg").height(); //返回id为msg的元素的高度
- $("#msg").height("300"); //将id为msg的元素的高度设为300
- $("#msg").width(); //返回id为msg的元素的宽度
- $("#msg").width("300"); //将id为msg的元素的宽度设为300
- $("input").val("); //返回表单输入框的value值
- $("input").val("test"); //将表单输入框的value值设为test
- $("#msg").click(); //触发id为msg的元素的单击事件
- $("#msg").click(fn); //为id为msg的元素单击事件添加函数
5、集合处理功能
对jQuery返回的对象集合无需逐个处理。
- $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
- //为索引分别为0,1,2的p元素分别设定不同的字体颜色。
- $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
- //实现表格的隔行换色效果
- $("p").click(function(){alert($(this).html())})
- //为每个p元素增加了click事件,单击某个p元素则弹出其内容
6、扩展我们需要的功能
eg:
定义自己的方法
- $.extend({
- min: function(a, b){return a < b?a:b; },
- max: function(a, b){return a > b?a:b; }
- }); //为jquery扩展了min,max两个方法
调用自己的方法
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
7、方法连写
eg:
- $("p").click(function(){alert($(this).html())})
- .mouseover(function(){alert('mouse over event')})
- .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
8、操作元素的样式
eg:
- $("#msg").css("background"); //返回元素的背景颜色
- $("#msg").css("background","#ccc") //设定元素背景为灰色
- $("#msg").height(300); $("#msg").width("200"); //设定宽高
- $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
- $("#msg").addClass("select"); //为元素增加名称为select的class
- $("#msg").removeClass("select"); //删除元素名称为select的class
- $("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class
9、事件处理
jquery可以动态为html元素添加事件。
eg:
- $("#msg").click(function(){alert("good")}) //为元素添加了单击事件
- $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
- //为三个不同的p元素单击事件分别设定不同的处理
- jQuery基础体验
- jQuery基础01体验
- jquery简单体验
- jquery简单体验
- JQuery初体验
- jquery简单体验(zz)
- jQuery插件shadowbox体验
- Jquery Mobile初体验
- jquery 简单体验
- jQuery初体验
- jquery validate初体验
- jquery再体验
- jQuery UI Autocomplete 体验
- jQuery UI Autocomplete 体验
- jQuery EasyUI初体验
- jQuery初体验
- jquery初体验
- JQuery初体验
- php 程序员
- joj 1989 Vampire Numbers
- 360安全卫士2011校园招聘信息
- iphone开发 简介
- 第一个 WinCE 程序:华容道
- jQuery基础体验
- joj 2284 W-LINE
- getchar()和EOF总结
- SSh小整合之用户登录
- 事件接收与忽略
- 缓冲区溢出攻击试验(bufbomb.c)
- 网页Gzip介绍及其使用方法
- 怎么才能邀请好友注册呢?我想要积分啊!呜……
- hibernate之整合proxool