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 页面全选框实践代码
Apr 02 Javascript
jQuery中extend函数详解
Jul 13 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js以对象为索引的关联数组
2010/07/04 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
公益活动策划方案
2014/01/09 职场文书
一月红领巾广播稿
2014/02/11 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL