jQuery 1 基础

最新推荐文章于 2022-11-15 10:08:40 发布

半侠

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量416

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/wulinbanxia/article/details/71216138

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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等）同样使用$符号。当这些库同时使用时会发生冲突。

①移交变量$控制权

因为jQuery库最后引入，所以此时$是jquery

jQuery.onConflict();//将变量$的控制权移交给Prototype

$("p"); //代表Prototype("p")

jQuery("p") //不能用$了，只能用jQuery

</script>

②自定义备用名称

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);

半侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 1 基础

jQuery 1 基础 1.jQuery 是一个 JavaScript函数库。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities 2.jQuery 的使用方法一：下载 jQuery，放在自己计算机上。
复制链接

扫一扫