欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

教程  jQuery教程——jQuery库基础

JQuery 本站 234 0评论

1.jQuery库的核心方法——$()


在jquery中,不管是页面元素的选择还是内置功能的方法,都是以一个美元符号$和一对圆括号开始。其实以“$()”方法是jQuery库中最重要、最核心的方法——jQuery()的简写,主要用来选择页面元素或执行功能方法。

如:

$(function(){});    //执行一个匿名方法

$('#box');      //进行执行的ID元素选择

$('#box').css('color','red');    //执行功能方法


jQuery()方法有7个重载,分别如下:


1) jquery()

该函数返回一个空的jQuery对象。在jQuery1.4以后的版本中,改函数返回一个空的jQuery对象。在之后的版本中,该函数会返回一个包含document节点的对象。


2)jQuery(element)

该函数将一个活多个DOM元素转化为jQuery对象(或jQuery集合),代码如下:

jQuery(document)

另外这个函数也可以将XML文档和window对象作为有效的参数。


3)jQuery(cllback)

该函数是jQuery(document).ready(callback)的简写。该函数将绑定一个在DOM文档载入完成后执行的函数。页面中所有需要在DOM加载完成时执行的jQuery操作,都需要包含在这个函数中。

该函数即原先页面onload事件的函数,可以放在这里调用,但是与页面onload事件的函数相比,这个函数可以同时存在多个而不冲突。也就是说,开发人员可以在页面中使用任意多个jQuery(document).ready()事件,绑定任意多个onload以后执行的函数。


4)jQuery(expression,[context])

该函数接收一个包含jQuery选择器的字符串,然后用这个字符串去匹配一个或多个元素。

jQuery中的操作都需要使用jQuery对象,所以jQuery的一切操作都要基于这个或者说都需要基于某种方式使用这个函数。这个函数最基本的用法就是向它传递一个选择器字符串,然后根据这个选择器字符串的内容来查找所有匹配的元素。

可选参数context是选择器查找的集合。如果没有指定context参数,jQuery函数将在当前的HTML文档中查找DOM元素,如果指定了context参数(如一个DOM元素集或jQuery对象),就会在这个context中查找。


5)jQuery(html)

该函数根据提供的HTML标记代码,动态创建由jQuery对象封装的DOM元素,代码如下:

jQuery("<div></div>")

上诉代码将创建一个div节点,可以动态的添加到DOM中。


6)jQuery(html,props)

该函数根据提供的HTML标记代码,动态创建由Jquery对象封装的DOM元素,同时对该DOM元素设置一组属性、事件等。代码如下:

jQuery("<input>",(type:"text",name="username"))

上述代码将创建一个input节点,并设置type属性为text,name属性为username。同样,改DOM元素可以被动态的添加到页面中。


7)jQuery(html,[ownerDocument])

该函数根据提供的HTML标记代码,动态创建由jquery对象封装的DOM元素,并且指定该DOM元素所在的文档。


2.jQuery代码风格和加载模式


1)代码风格

先看下面代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">这是一个测试!</p>
<button id="change">点击开始</button>
</body>
</html>

我们可以注意到

$("#change").click(function(){

      $("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

本来应该写成

$("#p1").css("color","red");

$("#p1").slideUp(2000);

$("#p1").slideDown(2000);

因为jQuery的这些方法,运行完后都会返回当前对象,所以可以进行链式操作。


2)加载模式

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

<!--导入jQuery代码库-->
   <script type="text/javascript" src="js/jquery-2.1.0.js">
   /*为了保证js和jq的代码能够同时使用,所以独立开一个scrpt*/
   </script>
        
<!--jq的文档加载事件-->
<script>
            /*js版的加载方式*/
            onload = function(){
                alert("我被加载了1");
            }
            
            /*jquery的加载方式*/
            jQuery(document).ready(function(){
                alert("我被加载了1");
            });
            /*简写方式*/
            $(document).ready(function(){
                alert("我被加载了2");
            });
            /*终极简写方式*/
            $(function(){
                alert("我被加载了3");
            });
</script>

说明:

· 如果在文档没有完全加载之前就运行函数,操作可能失败。

· jQuery选择器jQuery选择器允许您对HTML元素组或单个元素进行操作。

· jQuery选择器基于元素的id、类、类型、属性、属性值等查找(或选择)HTML元素。

· 它基于已经存在的CSS选择器,除此之外,它还有一些自定义的选择器。

· jQuery中所有选择器都以美元符号开头:$ (function(){// 开始写 jQuery 代码...});如果在文档没有完全加载之前就运行函数,操作可能失败。

· jQuery 选择器jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。


3)jQuery()函数有4中不同的调用方式


· 传递CSS选择器(字符串)给$()方法。

· 传递一个Element、Document或Window对象给$()方法,$()只需简单的将该对象封装成jQuery对象并返回。这样就可以使用jQuery方法来操作这些元素而不使用原生DOM方法。

· 传递HTML文本字符串给$()方法,jQuery会根据传入的文本创建好HTML元素并封装为jQuery对象返回。

例如:

var img=$("<img/>",     //新建一个<img>元素
{ src:url,              //具有HTML属性
  css:{borderWidth:5},  //CSS样式
  click:handleClick     //和时间处理程序
});

· 传入一个函数给$()方法。当文档加载完毕且DOM可操作时,传入的函数将被调用。

jQuery(function(){       //文档加载完毕时调用
       //所有jQuery代码放在这里
});

有时还可以看到$(f)的老式和完整写法:

$(document).ready(f)

通过$()注册的函数将在DOMContentLoaded事件触发时由jQuery触发。当浏览器不支持该事件时,会在load事件触发时由jQuery触发。这意味着文档已经解析完毕,但图片等外部资源可能还未加载。如果在DOM准备就绪后再传递函数给$(),传递的函数会在$()返回之前立刻调用。


jQuery函数:jQuery或$()的值,可用来创建jQuery对象、注册DOM就绪时需要调用的处理程序、用作jQuery命名空间。

jQuery对象:由jQuery函数返回的对象。一个jQuery对象表示一组文档元素。


jQuery方法和jQuery函数:

$.each(a,f) //jQuery的each函数

$("a").each(f) //调用jQuery函数获得表示所有<a>元素的jQuery对象,调用该jQuery对象的each方法。

$()的返回值是一个jQuery对象,jQuery对象是一个类数组。


$("body").length  //=>1,文档只有唯一一个body元素

$("body")[0]   //等于document.body

jQuery对象用size()方法替代length属性,get()方法替代方括号索引、toArray()方法转化为真实数组。jQuery对象还有三个有趣的属性:

var bodyscripts=$("script",document.body);

bodyscripts.selector  //=>"script"

bodyscripts.context   //=>document.body

bodyscripts.jquery    //=>"1.4.2"


3. jQuery对象转成DOM对象


1)$("#id名")[0]  //id选择器

<input type="text" id="tx" value="44">

$(function() {
//通过id选择器获取jquery对象
var tx=$("#tx");
//转成dom对象
var domObj=tx[0];
})


2)$("#id名").get(0)   //id选择器

<input type="text" id="tt" value="33">

$(function() {
//转成dom对象
var domObj=$("#tt").get(0); 
alert(domObj.value);
})


3)$("标签名").eq(0)[0]   或 $("标签名").get(0) //标签选择器,下标从0开始    

<input type="text" name="tt" value="33">

<input type="text" name="tt" value="44">

$(function() {   
//通过标签选择器获取jquery对象(多个)

var jqObj=$("input");
//获取单个jquery对象

var jq=jqObj.eq(0);
//获取dom对象

var domObj=jqObj.get(0);
})


DOM对象转成jQuery对象:

<input type="text" id="tx" value="33">

//获取文本框
var domObj=document.getElementById("tx");
//转成jquery对象
var jq=$(domObj);


参考网址:

https://blog.csdn.net/weixin_38930706/article/details/80917821 

https://www.cnblogs.com/lsy0403/p/5907084.html

转载请注明: ITTXX.CN--分享互联网 » jQuery教程——jQuery库基础

最后更新:2019-07-05 18:02:23

赞 (1) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽