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工具 Event封装
Aug 21 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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
xajax写的留言本
2006/11/25 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
简化vuex的状态管理方案的方法
2018/06/02 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
numpy.where() 用法详解
2019/05/27 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
物流仓储计划书
2014/01/10 职场文书
会计求职信范文
2014/05/24 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
经费申请报告范文
2015/05/18 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android