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控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP调用Webservice实例代码
2011/07/29 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
JS中的三个循环小结
2017/06/20 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
物控部经理职务说明书
2014/02/25 职场文书
本科应届生自荐信
2014/06/29 职场文书
综治工作汇报材料
2014/10/27 职场文书
小班上学期个人总结
2015/02/12 职场文书
护士自荐信范文
2015/03/25 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
nginx设置资源请求目录的方式详解
2022/05/30 Servers