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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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 foreach、while性能比较
2009/10/15 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php无序树实现方法
2015/07/28 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
总经理助理的八要求
2013/11/12 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
测量工程专业求职信
2014/02/24 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
公司股东合作协议书
2014/09/14 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
党员评议自我评价
2015/03/03 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python