jQuery 1 基础
来源:互联网 发布:红蜘蛛教学软件破解 编辑:程序博客网 时间:2024/06/05 15:54
jQuery 1 基础
1.jQuery 是一个 JavaScript函数库。
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
2.jQuery 的使用
方法一:下载 jQuery,放在自己计算机上。
<head><script type="text/javascript" src="jquery.js"></script></head>
注:jquery.js要放在其他使用jQuery的js文件之前,否者找不到jQuery函数。
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><script type="text/javascript" src="scripts/header-info-switch.js"></script><script type="text/javascript" src="scripts/pic-switch.js"></script><script type="text/javascript" src="scripts/nav.js"></script>
方法二:
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或Microsoft加载CDN jQuery核心文件。
使用 Google 的 CDN
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script></head>
使用 Microsoft 的 CDN
<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>
3.文档就绪函数
所有jQuery函数位于一个$(document).ready()函数中,这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
$(document).ready(function(){--- jQuery functions go here ----});
注1:可以有多个$(document).ready()函数,如下:
$(document).ready( function(){ alert("Hello")});$(document).ready( function(){ alert("Hello")});注2:函数$(document).ready()可以简写为$(),如下:
$( function(){ alert("Hello")});
4.jQuery的语法:$(selector).action()
·美元符号$就是jQuery的简写,是等价的,如:$("p")与jQuery("p")
·选择符(selector)“查询”和“查找”HTML元素
·操作action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
5.jQuery对象和DOM对象
①区别:
简单来说,通过DOM方法得到的就是DOM对象,通过jQuery方法得到的就是jQuery对象.
var domobj = document.getElementById("id"); //DOM对象var x = domobj.innerHTML; //DOM对象必须使用DOM方法var $jqobj = $("#id"); //jQuery对象var x = jqobj.html(); //jQuery对象必须使用jQuery方法注:一般我们将DOM对象命名为:variable;jQuery对象命名为:$variable。
②互相转换
1)jQuery对象 => DOM对象,用[0]和get(0)转换
var $abc = $("#id"); //$abc是jQuery对象var abc = $abc[0]; //abc,$abc[0]是DOM对象var abc = $abc.get(0); //abc,$abc.get(0)是DOM对象2)DOM对象 => jQuery对象,用$()转换
var abc = document.getElementById("id"); //abc是DOM对象var $abc = $(abc); //$abc,$(abc)是jQuery对象
6.jQuery中的this
简单的说,哪个对象在调用它,它就代表文谁。
//例1:$("#btnConfirm").click(function(){alert($(this).val());/*看这里,this代表的其实就是这个ID为btnConfirm的按钮,因为你现在点击的是ID为btnConfirm的按钮,那么this就是它*/});//例子2:$("ul li").each(function(){alert( $(this).text());/*这里的this代表的是迭代的每个li元素,因为每次迭代,得到的都是一个<li>元素,那么这个时候this 就代表着这个当前的<li>元素*/});注:这里都是$(this),得到的是jQuery对象;若写成this,得到的是DOM对象,出现错误。
7.jQuery与其它库的$符号的冲突
jQuery库用$符号代替jQuery,其他JS库(Prototype YUI MooTools等)同样使用$符号。当这些库同时使用时会发生冲突。
①移交变量$控制权
<script src="prototype-1.6.0.3.js"></script> //引入Prototype库
<script src="jquery-1.3.1.js"></script> //引入jQuery库
因为jQuery库最后引入,所以此时$是jquery
<script type="text/javascript">
jQuery.onConflict();//将变量$的控制权移交给Prototype
$("p"); //代表Prototype("p")
jQuery("p") //不能用$了,只能用jQuery
</script>
②自定义备用名称
<script type="text/javascript">
var jq = jQuery.onConflict(); //自定义备用名称,通常是jq $J等
jq("p"); //代表jQuery("p")
</script>
③既不想自定义名称,又想使用$
jquery的文档就绪函数如下写法:(此时$代表Prototype)
jQuery(document).ready(function($){
$("p") //这里使用$代表jQuery
});
$("p") //这里使用$代表Prototype
也可写为:
jQuery(function($){···});
(function($){···})(jQuery);
- Jquery基础1
- Study JQuery《1、基础》
- Jquery基础1
- JQuery-基础学习1
- jQuery基础篇1
- JQuery基础学习1
- jQuery基础总结1
- jQuery基础1
- jQuery 1 基础
- jQuery基础(1)
- jQuery基础(1)
- DAY60 jQuery基础1
- 1、jQuery基础(jQuery构造器)
- jQuery日记(1)--jQuery基础和选择器
- Jquery基础学习笔记(1)
- Jquery基础学习笔记(1)
- jQuery基础笔记(1)
- jquery学习笔记1------基础
- C#实现获取枚举的描述
- 获取任意一个时间的下一天的时间
- 1096. Consecutive Factors 解析
- 设计一个脚本,根据关键字提取整段话中关键字所在的句子
- Android 百分比布局库(percent-support-lib) 解析与扩展
- jQuery 1 基础
- Mybatis 框架使用的最核心内容及mapper.xml标签使用
- SSM框架——使用MyBatis Generator自动创建代码
- Aggreagation 日常使用语句汇总(持续更新)
- 利用HttpURLConnection实现远程下载文件
- Spring注解配置Mongo及基本CRUD操作简介
- Bean生命周期回调
- Javascript实现函数的curry化
- 结构型模式之装饰(Decorator)