jQuery概述与总结

来源：互联网发布：小米网络电视多少钱编辑：程序博客网时间：2024/06/06 18:10

jQuery概述与总结

jQuery是一套javascript脚本库，而非脚本框架，脚本库能够帮助我们完成逻辑，实现业务功能，使用jQuery将极大地提高编写脚本代码的效率，是写出来的代码更加健壮和优美。

jQuery特点

1，提供了强大的功能函数

2，解决浏览器兼容问题

3，实现丰富的UI

4，纠正错误的脚本知识

代码及注释：

1，基本案例：

/**第一步加载html页面*/

// window.onload = function(){};//加载html 并且加载外部所有的引用文件(图片,css样式,js等)

/**Jquery*/

//window --->location /history/document/Na...

//DOM对象是不能使用Jquery中的方法的. JQuery中的对象是不能使用DOM对象的方法

//但是它们之间可以相互转换

//那又是怎么转换的呢?

/**

讲解第一种:DOM对象转换成Jquery对象的方式

1、对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象

var document = window.document;//DOM对象

实现转换方式如下：

var $document=$(document);//$()从哪里来到底从哪里来？

/**Jquery的页面载入事件处理方式 */

$(document).ready(function (){ //加载html 立即加载

alert("第一个Jquery的案例")

});

/**理解：

1、Jquery的引入方式

2、$的由来

3、DOM对象与Jquery对象转换

4、理解匿名函数的处理*/

</script>

2，使用jQuery获取对象相关信息

/**

在这里重点介绍：

一：Jquery中的基本选择器

1、id选择器

2、class选择器

3、元素选择器器

4、*

5、并列选择器用英文的逗号区分

二：重点介绍了Jquery对象转换成DOM对象的方法

1、Jquery对象返回的是一个数组对象可以采用如下方式转换

var domObject = $("#thed")[0];

2、可以采用Jquery中get(index)方法获取

get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象

三：重点介绍Jquery对象中的get(index)方法,size()方法,length属性

$(document).ready(function(){

//ID匹配的选择器Jquery对象

//alert($("#thed"));

/**转换成DOM对象的方式

1、Jquery对象返回的是一个数组对象可以采用如下方式转换

var domObject = $("#thed")[0];

alert(($("#thed")[0]).innerHTML);

//class匹配选择器Jquery对象

alert($(".rdc"));

/**

2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取

get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象

var domObject = $(".rdc").get(0);

alert(domObject.innerHTML);

//* 匹配所有的元素的Jquery对象

alert($("*"));

alert($("*").get(0).innerHTML)

//根据给定的元素名称获取Jquery对象

alert($("tr"));

/**采用第一种方式把$("tr")转换成DOM对象*/

alert(($("tr")[$("tr").size()-1]).innerHTML);

alert(($("tr")[$("tr").length-1]).innerHTML);

//匹配所有选择器的Jquery组合对象

alert($("tr,tr.rdc"));

alert($("tr,tr.rdc")[$("tr,tr.rdc").length-1].innerHTML)

});

</script>

3，使用jQuery实现对象颜色变换

/**

层次元素关系

1、祖先关系空格符号

2、父子关系大于符号

3、紧跟的关系 +符号

4、紧跟后的所有兄弟关系 ~符号

CSS样式

1、css("");带有一个参数是获取其属性的值

2、css("","");为其对象设置一个指定的属性和属性值

3、css(properties);把一个“名/值对”对象设置为所有匹配元素的样式属性 {"":"","":""...};

$(document).ready(function(){

/**层级元素选择器的使用方式*/

/**祖先关系符号为===>空格*/

var $frmipts = $("div input");//获取div元素的后代的所有input的元素返回一个Jquery对象

/**输出Jquery对象的大小*/

alert("后代个数是："+$frmipts.size());

/**父子关系符号为===>>*/

var $ipt = $("form>input");

//为你获取的input添加背景颜色

/**采用Jquery对象转换成DOM对象后使用style样式进行设置的*/

var iptt = $ipt[0];

iptt.style.backgroundColor="red";

alert("-----------改变中介线---------------");

/**采用Jquery对象本身的css方法来设置样式*/

$ipt.css("background-color","blue");

/**匹配所有紧接在某个元素后的某个元素符号为===> +*/

var $lipts=$("label+input");

/**为其添加背景颜色*/

$lipts.css("background-color","green");

/**匹配 prev 元素之后的所有 siblings(兄弟) 元素符号为====> ~*/

var $fipts = $("form~input");

$fipts.css("background-color","yellow");

/**我使用到了CSS样式

.css("")//获取其样式属性的值

案例： $fipts.css("background-color");

.css("","") //为其添加样式属性及属性值

$fipts.css("background-color","yellow");

.css(Map);//把一个“名/值对”对象设置为所有匹配元素的样式属性。

$fipts.css({"background-color":"red","color":"blue"});

alert("获取该Jquery对象的背景颜色值："+$fipts.css("background-color"));

});

</script>

4， jQuery综合实例

/**

简单选择器

1、：first 匹配的第一个

2、：last 匹配的最后一个

3、：lt(index) 小于某个的

4、：gt(index) 大于某个的;

5、：eq(index) 等于某个相当于过滤器中的.eq(index)

6、：even 奇数行

7、：odd 偶数行

8、：header 匹配h1,h2 h3 等标题

9、：not 除去匹配的(剩下的)

过滤器：

.eq(index)匹配某个

属性中html代码

.html()返回整个html文本

属性的文本

.text();返回这个html代码中的文本内容如果是多个就组合文本内容并返回

//纠正：开始讲的过滤器

/**页面载入事件处理*/

$(function(){

//获取class类别选择器JQuery对像集合中的第一个对象

var $tr1 = $(".rdc:first");

//属性：.html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

alert($tr1.html());

//获取class选择器对象集合中的最后一个对象

var $ltr = $(".rdc:last");

//属性:.text();结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

alert($ltr.text());

/** even匹配的是索引是:0 2 4 但行数是1,3 5......

:even 选择奇数行并且为其添加背景颜色为红色*/

$("tr:even").css("background-color","red");

/** :odd 选择偶数行并且为其添加背景颜色为蓝色*/

$("tr:odd").css("background-color","blue");

/**$("tr")取得所有的行的JQuery对象的集合

.eq(index)匹配一个给定索引值的元素的Jquery对象

.css("","")为Jquery对象添加一个样式属性和属性值

对象链式操作*/

$("tr:eq(2)").css("background-color","yellow");

//等效于

$("tr").eq(2).css("background-color","yellow");

/**集合 List --->get(index)--->具体的对象--->具体对象的方法*/

/**取得所有行的Jquery对象集合索引值小于1的所有的tr对象样式设置为green*/

$("tr:lt(1)").css("background-color","green");

/**取得索引大于1 并且把背景颜色设置为black*/

$("tr:gt(1)").css("background-color","black");

//匹配不是最后一行的样式背景颜色统一设置为红色

$("tr:not(:last)").css("background-color","red");

//匹配标题

alert($(":header").html());

});

</script>s