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中的注释使用与注意事项小结
Sep 20 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
ionic实现底部分享功能
May 11 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
详解vuex状态管理模式
Nov 01 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
建筑专业自荐信范文
2014/01/05 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
JS实现简单九宫格抽奖
2022/06/28 Javascript