jQuery 入门讲解1


Posted in Javascript onApril 15, 2009

jQuery构造函数
JQuery优点
◦体积小(v1.2.3 15kb)
◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera)
◦链式代码
◦强大的事件、样式支持
◦强大的AJAX功能
◦易于扩展,插件丰富
jQuery的构造函数接收四种类型的参数:
1. jQuery(expression,context)
2. jQuery(html)
3. jQuery(elements)
4. jQuery(fn)
第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。
DEMO:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery basic</title>
<style type="text/css">
.selected
{
background-color:Yellow;
}
</style>
<script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
<h3>jQuery构造函数</h3>
<ul>
<li>jQuery(expression,context)</li>
<li>jQuery(html)</li>
<li>jQuery(elements)</li>
<li>jQuery(fn)</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
将以下jQuery代码加入文末的脚本块中:
jQuery('ul>li:first').addClass("selected");
其中jQuery()可替换为快捷方式$(),如果$被其它对象占用,可使用jQuery.noConflict()函数取消快捷方式。
"ul>li:first"中ul>li表示所有位于ul下的li元素(为CSS表达式,XPath方式可用ul/li),:first表示其中的第一个。addClass()为jQuery对象用来添加CSS样式类的函数,相反的函数为removeClass()。
再加入以下代码:
$('ul').append($('<li>new item</li>'));
其中$('<li>new item</li>')将其中的字符串转换为DOM对象,然后通过append()函数加入ul对象的最后。
接下来:
$(document).ready(function(){
$('ul').css('color','red');
});
jQuery构造函数中还可以真接传入DOM对象,如document,或jQuery对象(当然就没什么意义)。ready()函数为document添加事件处理函数,将ul的颜色设为红色。
$(document).ready()由于应用场景众多,所以可以直接用$(fn)来代替,fn表示处理函数。(ready处理函数貌似在文档内容载入完成后执行,无需等待相关其它图片等资源载入完成,所以比load事件要更早执行。
$(function(){
alert('welcome to jQuery');
});
以上代码的效果是页面一载入,就弹出一个对话框。

Javascript 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
javascript 类方法定义还是有点区别
Apr 15 #Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 #Javascript
JavaScript获取GridView选择的行内容
Apr 14 #Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 #Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 #Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 #Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 #Javascript
You might like
ftp类(example.php)
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js实现点击切换TAB标签实例
2015/08/21 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
请解释在new与override的区别
2012/10/29 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
测量员岗位职责
2015/02/14 职场文书
开国大典观后感
2015/06/04 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书