初始jQuery-CSDN博客

本文链接：https://blog.csdn.net/yananye/article/details/113422930

认识jQuery

1.jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript库，是由美国人John Resig于2006年创建的开源项目。目前，jQuery团队主要包括核心库，UI，插件和jQuery Mobile等开发人员，推广人员，网站设计人员及维护人员。随着人们对它的日渐熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，这促使jQuery逐步发展成为如今集JavaScript，CSS，DOM和Ajax于一体的强大框架体系。
作为JavaScript的程序库，jQuery凭借简洁的语法和跨浏览器兼容性，极大简化了遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的代码，从而广泛应用于Web应用开发，如导航菜单，轮播广告，网页换肤和表单验证等方面。
总之无论是网页设计师，后台开发者，业余爱好者，还是项目管理者，无论是JavaScript菜鸟，还是JavaScript大侠，都有足够的理由学习JQuery。

2.JQuery的用途
1.访问和操作DOM元素
使用jQuery可以很方便地获取和修改页面中的指定元素，无论是删除，移动还是复制元素，jQuery都提供了一整套方便，快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度，如添加，删除商品，留言，个人信息等。

2.控制页面样式
通过引入jQuery，程序开发人员可以很便捷的控制页面的CSS文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最头痛的事情，而使用jQuery操作页面的样式可以很好地兼容各种浏览器。最典型的有微博，博客，邮箱等的换肤功能。

配置jQuery环境

1.获取jQuery的最新版本
进入jQuery的官方网站（http://jquery.com）。在页面右侧的Download JQuery区域，下载最新版的jQuery库文件。

2.jQuery库类型说明
jQuery库的类型分为两种，分别是开发版(未压缩版)和发布版(压缩版),
在这里插入图片描述
3.jQuery环境配置
jQuery不需要安装，把下载的jquery.js放到网站的一个公共位置，想在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。

4.在页面中引入jQuery

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面中引入jQuery库文件</title>
</head>
<body>
<script src="js/jquery-1.12.4.js"></script>
</body>
</html>

jQuery语法

示例

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弹出窗口特效</title>
</head>
<body>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $(document).ready(function(){
        alert("我欲乘风波浪踏遍黄沙海洋。")
    })
</script>
</body>
</html>

这段代码中 $(d o c u m e n t) . r e a d y () 语句中的 r e a d y () 方法类似于传统 J a v a S c r i p t 中的 o n l o a d () 方法，它是 j Q u e r y 中页面载入事件的方法。$ (document).ready()与在JavaScript中的window.onload非常相似，他们都意味着在页面加载完成时，执行事件，例如，如下jQuery代码：

$(document).ready(function(){
	//执行代码
});

类似于如下javascript代码:

window.onload=function(){
	//执行代码
};

两者在功能上可以互换，但它们之间又存在一些区别。
在这里插入图片描述
在实际开发中，通常需要在页面加载后立即使用JavaScript执行一些初始化工作，这通常涉及DOM元素的访问和操作，因此必须确保这些DOM元素已经加载完成，否则将得不到这些DOM对象。一般的做法是$(document).ready()方法中执行这些工作。

document语法结构

通过 $(d o c u m e n t) . r e a d y (. . . . . . . .) ；不难发现，这条语句包含三大部分$ ()，document和ready()。这三大部分在jQuery中分别被称为工厂函数，选择器和方法，将其语法后结构如下：

$(selector).action();

1.工厂函数
在jQuery中，美元符号“ $” 等价于 j Q u e r y ，即$ ()=jQuery()。$()的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法。

规范：当$()参数是DOM对象时，该对象无须使用双引号包裹起来，如果获取的时document对象，则写作美元符号(document)。

2.选择器selector
jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器，如标签选择器，类选择器，ID选择器和后代选择器等，使用jQuery选择器和$(）工厂函数可以非常方便的获取需要操作的DOM元素，语法格式如下：

$(selector);

ID选择器，标签选择器，类选择器的用法如下所示:

$("#userName");		//获取DOM中id为userName的元素
$("div")			//获取DOM中所有的div元素
$(".content");		//获取DOM中calss为content的元素

3.方法action()
jQuery中提供了一系列方法。在这些方法中;一类重要的方法就是事件处理方法，主要用来绑定DOM元素的事件和事件处理方法。在jQuery中，许多基础的零件，如鼠标点击事件，键盘事件和表单验证事件等，都可以通过这些事件方法进行绑定，对应的在jQuery中则写作ciick(),mouseover()和mouseout()等。

示例：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左导航菜单</title>
    <style type="text/css">
        li{list-style: none; line-height: 22px; cursor: pointer;}
        .current{background: #6cf; font-weight: bold; color: #fff;}
    </style>
</head>
<body>
<ul>
    <li id="current">jQuery简介</li>
    <li>jQuery语法</li>
    <li>jQuery选择器</li>
    <li>jQuery事件与动画</li>
    <li>jQuery方法</li>
</ul>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $(document).ready(function(){
        $("li").click(function(){
            $("#current").addClass("current")
        });
    });
</script>
</body>
</html>

在上面的示例中出现的addClass()方法是jQuery中用于进行CSS操作的方法之一，它的作用是向被选中的元素添加一个或多个类样式，它的语法如下：

jQuery对象.addClass([样式名]);

其中，样式可以是一个，也可以是多个，多个样式名需要用空格隔开。
需要注意的是，与使用选择器获取DOM元素不同，获取id为current的元素时，“current”前需要加id符号“#”，而使用addClass()方法添加class为current的类样式时，该类名前面不带有类符号“.”。

jQuery中还有用于CSS操作的另一种方法，它的作用是为匹配的元素添加CSS样式，语法如下：

css("属性","属性值");	//设置一个CSS属性
css({"属性1":"属性值1","属性2":"属性值2".....});//同时设置多个css属性

若要使用css()方法为页面中的p元素设置文本颜色为蓝色，可以写作：$(“p”).css(“color”,“blue”)。

注意：

css()方法为所匹配的元素设置给定的CSS样式。
addClass()方法向所有匹配的元素添加一个或多个类，该方法不会删除已经存在的类，仅在原有的基础上追加新的样式。
基于结构与样式分离的原则，通常在实际应用中，为某元素添加样式，使用addClass()方法比css()方法的频率要高很多，因此建议使用addClass()方法为元素添加样式。

children()方法jQuery中遍历后代的一种方法，用作查找被选元素的所有直接子元素。show()和hide()在jQuery中经常用到，分别用来显示，隐藏HTML元素，语法如下：

$(selector).show();
$(selector).hide();

jQuery程序的代码风格

代码风格即程序开发人员所编写的源代码的书写风格，良好的代码风格使代码具有可读性。
1.“美元符号的使用
在jQuery程序中，使用最多的就是美元符号“$”，无论是页面元素的选择器，还是功能函数的前缀，都必须使用该符号，它的jQuery程序的标志，即美元符号等同于jQuery。

2.链式操作
在对DOM元素进行多个操作时，为了避免过度使用临时变量或不需要的重复代码，在大多数jQuery代码中采用一种链式编程模式。它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便于将返回结果应用于该对象的下一次操作。
示例

<head lang="en">
    <meta charset="UTF-8">
    <title>问答特效</title>
    <style type="text/css">
        h2{padding: 5px;}
        p{display: none;}
    </style>

</head>
<body>
<h2>什么是受益人?</h2>
<p>
    <strong>解答：</strong>
    受益人是指人身保险中由被保险人或者投保人指定的
    享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("h2").click(function(){  //单击h2比标题，增加背景颜色和显示p标签
            $("h2").css("background-color","#ccffff").next().css("display","block");
        });
    });
</script>

</body>
</html>

next()方法，其作用是匹配元素集合中的每个元素其后紧邻的同辈元素。
3.隐式迭代
在jQuery编写中，除了链式操作外，还用一种方式，即隐式迭代，在如下示例中为每个li标签中的字体设置样式。代码如下：

<body>
<ul>
    <li>数码产品</li>
    <li>家用电器</li>
    <li>妇幼保健</li>
    <li>时尚丽人</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(document).ready(function(){
        //加载页面，设置所有li标签中的字体颜色为红色并加粗显示。
        $("li").css({"font-weight":"bold","color":"red"});
    });
</script>
</body>

在上述代码中，获取所有li标签，并设置字体样式。如果在传统的JavaScript写法中，需要使用getElementsByTagName()获取li标签集合，然后使用for循环一个一个的设置字体样式，而这里使用jQuery就不一样了，它不需要遍历所有元素，可以直接设置元素样式，这就是隐式迭代。

4.添加注释
在这里插入图片描述

DOM对象和jQuery对象

1.DOM对象
大家都知道DOM是"Document object Model（文档对象模型）"的英文单词首字面的缩写，如类似HTML，XML等属于文档类型的语言，才具有DOM。
每个HTML页面，都具有一个DOM，每个DOM都可以表示成一棵树，在这棵树里存在许多不同类型的节点，有些DOM节点还包含其他类型的节点。DOM里的节点通常分为三种类型，即元素节点，文本节点，属性节点。

2.jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，他能够使用jQuery中的方法，例如：

$("#title").html();	//获取id为title的元素内的html代码；

这段代码等同于如下代码：

document.getElementById("title").innerHTML;

在jQuery对象中无法直接使用DOM对象的任何方法。例如，$("#id").innerHTML和￥（"#id"）.checked之类的写法都是错误的，可以使用，￥("#id").html()和￥("#id").arrt(“checked”)之类的jQuery方法来代替。同样DOM对象也不能只有jJQuery里的方法，例如，document.getElementById(“id”).html()也会报错，只能有document.getElementById(“id”).innerHTML语句。

jQuery对象与DOM对象的互相转换

在实际使用jQuery开发过程中，jQuery和DOM对象互相转换是非常罕见的。在学习jQuery对象和DOM对象相互转换之间先定义好变量的风格。如果获取的对象是JQuery对象，那么在变量前面加上$，例如：

var $variable=jQuery对象;

如果获取的对象是DOM对象，则定义如下：

var variavle=DOM对象;

1.jQuery对象转换为DOM对象
jQuery提供了两种方法将一个jQuery对象转换成一个DOM对象，即[index]和get(index);
(1).jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如：

var $txtName=$("#txtName");//jQuery对象
var txtName=$txtName[0]		//DOM对象
alert(txtName.checked)	//检测这个checked是否被选中了

(2).通过get(index)方法得到相应的DOM对象，语法如下：

var $txtName=$("txtName");	//jQuery对象
var txtName=$txtName.get(0);		//DOM对象
alert(txtName.checked)		//检测这个checked是否被选中了

jQuery对象转换成DOM对象在实际开发中并不多见，除非希望使用DOM对象特有的成员，如outerHTML属性，通过该属性可以输出相应的DOM元素的完整的HTML代码，而jQuery并没有直接提供该功能。

2.DOM对象转换成jQuery对象
对于一个DOM对象，只需要用$()函数将DOM对象包装起来，就可以获得一个JQuery对象。其方式为￥(DOM对象)，jQuery代码如下。

var txtName=document.getElementById("txtName");	//DOM对象
var $txtName=$(txtName);		//jQuery对象

转换后可以任意使用JQuery中的方法。

在实际开发中，将DOM对象转换为jQuery对象，多见于jQuery事件方法的调用中。

最后再次强调：DOM对象只能用DOM中的方法，jQuery对象只能使用jQuery中的方法，但jQuery对象提供了一套更加完善的对象成员用于操作DOM，关于jQuery操作DOM将在后续章节中详细讲解。