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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jQuery取id有.的值的方法
May 21 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
js获取ip和地区
2017/03/10 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python3实现斐波那契数列(4种方法)
2019/07/15 Python
pycharm显示远程图片的实现
2019/11/04 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
5款实用的python 工具推荐
2020/10/13 Python
python中re模块知识点总结
2021/01/17 Python
学前教育教师求职自荐信
2013/09/22 职场文书
房地产财务管理制度
2014/02/02 职场文书
小学运动会演讲稿
2014/08/25 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
产品调价通知函
2015/04/20 职场文书
综治目标管理责任书
2015/05/11 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android