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 相关文章推荐
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
纯JS实现五子棋游戏
May 28 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
收集的php编写大型网站问题集
2007/03/06 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php split汉字
2009/06/05 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js select option对象小结
2013/12/20 Javascript
javascript验证身份证号
2015/03/03 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
Promise扫盲贴
2019/06/24 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
培训主管岗位职责
2014/02/01 职场文书
测量工程专业求职信
2014/02/24 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
转让协议书范本
2014/09/13 职场文书
工作失误检讨书范文
2015/01/26 职场文书
入党积极分子个人总结
2015/03/02 职场文书
亮剑观后感300字
2015/06/05 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript