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闭包函数访问外部变量的方法
Aug 27 Javascript
JavaScript DOM基础
Apr 13 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue.js todolist实现代码
Oct 29 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
jQuery中event.target和this的区别详解
Aug 13 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php判断linux下程序问题实例
2015/07/09 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
python常见排序算法基础教程
2017/04/13 Python
Python数据可视化之画图
2019/01/15 Python
详解python的argpare和click模块小结
2019/03/31 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
TCP/IP的分层模型
2013/10/27 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
模具毕业生推荐信
2014/02/15 职场文书
领导调研接待方案
2014/02/27 职场文书
音乐学专业求职信
2014/07/22 职场文书
委托书格式
2014/08/01 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
机关职员工作检讨书
2014/10/23 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技