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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
js上传图片预览的实现方法
May 09 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
使用python turtle画高达
2020/01/19 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
行政部总经理岗位职责
2014/01/04 职场文书
个人求职信范文分享
2014/01/31 职场文书
启动仪式策划方案
2014/06/14 职场文书
顶岗实习计划书
2015/01/16 职场文书
二十年同学聚会感言
2015/07/30 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript