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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
AngularJs表单验证实例详解
May 30 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
常用的javascript设计模式
Jan 11 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue-cli4.5.x快速搭建项目
May 30 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 MySql增删改查的简单实例
2016/06/21 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
JS 对象介绍
2010/01/20 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python if语句知识点用法总结
2018/06/10 Python
numpy返回array中元素的index方法
2018/06/27 Python
Sanic框架配置操作分析
2018/07/17 Python
django 消息框架 message使用详解
2019/07/22 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
应届大学生自荐信
2013/12/05 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
先进班组事迹材料
2014/12/25 职场文书
工作感想范文
2015/08/07 职场文书