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 学习入门篇附实例代码
Mar 16 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
js打开新窗口方法整理
Feb 17 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
vue页面跳转实现页面缓存操作
Jul 22 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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
Javascript倒计时代码
2010/08/12 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
js style动态设置table高度
2014/10/21 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python实现批量修改文件名代码
2017/09/10 Python
numpy数组拼接简单示例
2017/12/15 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
校园文化建设方案
2014/02/03 职场文书
综合实践活动方案
2014/02/14 职场文书
百日安全活动总结
2014/05/04 职场文书
地质灾害防治方案
2014/05/14 职场文书
政府四风问题整改措施
2014/10/04 职场文书
考勤制度通知
2015/04/25 职场文书
行政介绍信范文
2015/05/04 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python