jQuery 1 基础

xiaoxiao2021-02-28  81

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要放在其他使用jQueryjs文件之前,否者找不到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);

转载请注明原文地址: https://www.6miu.com/read-33532.html

最新回复(0)