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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
详解Node.js开发中的express-session
May 19 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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相关资料
2006/10/09 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
JSON的parse()方法介绍
2019/01/31 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python实现购物程序思路及代码
2017/07/24 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
如何删除一个表里面的重复行
2013/07/13 面试题
项目开发计划书
2014/01/09 职场文书
教师师德承诺书
2014/03/26 职场文书
保险内勤岗位职责
2014/04/05 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
学校师德师风整改措施
2014/10/27 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
停电通知范文
2015/04/16 职场文书
迎新年主持词
2015/07/06 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers