初识JQuery

JQuery与JavaScript

JQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装。

使用JQuery与单纯使用JavaScript相比最大的优势是能使页面在个浏览器中保持统一的显示效果，即不存在浏览器兼容性问题。

JQuery的用途

1、访问和操作DOM元素

2、控制页面样式

3、对页面事件进行处理

4、扩展新的jQuery插件

5、与Ajax技术完美结合

JQuery的优势

1、体积小，压缩后只有100KB左右

2、强大的选择器

3、出色的DOM封装

4、可靠的事件处理机制

5、出色的浏览器兼容性

6、使用隐式迭代简化编程

7、丰富的插件支持

JQuery语法

在页面中引入jQuery

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

使用JQuery弹出消息框

例如：

<body>

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        alert("jQuery！");
    });
</script>
</body>

这段代码中 $(document).ready()语句中的ready()方法类似于传统JavaScript中的onload()方法，它是JQuery中页面载入事件的方法。

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

JQuery语法结构

JQuery语句的三大部分分别称为工厂函数、选择器和方法。将其语法简化后如下：

语法：

$(selector).action() ;

1、$( )的作用是将DOM对象转化为JQuery对象，只有将DOM对象转化为JQuery对象后，才能使用JQuery的方法。

2、选择器selector

JQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器。使用JQuery选择器和$( )工厂函数可以非常方便的获取需要操作的DOM元素

语法：

$(selector)

3、方法action()

jQuery中提供的方法，其中包括绑定事件处理的方法

例如：

<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" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("li").click(function(){
            $("#current").addClass("current");
        });
    });
</script>
</body>

示例代码中的addClass()方法是JQuery中用于进行CSS操作的方法之一，它的作用是向被选元素添加一个或多个样式。

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

其中样式名可以是一个，也可以是多个，多个样式名需要用逗号隔开。

例如：

 <body>
<div class="nav-box">
<div class="nav-top"><a href="">全部商品分类</a></div>
<ul>
<li>
<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
</li>
</ul>
</div>
    <script src="js/jquery-1.12.4.js"></script>
<script src="js/hover.js"></script>
<script>
$(document).ready(function(){

/**一级内容悬浮**/
$("li").mouseover(function(){
$(this).css({"background":"orange"});//当前li 背景颜色为橙色
$(this).children("div").show();//让相应二级内容显示
}).mouseout(function(){
 $(this).css({"background":"#c81623"});
$(this).children("div").hide();
});
});
</script>
 </body>

这个示例运用了css()方法，这是JQuery中用于进行CSS操作的另一种方法，它的作用是为匹配的元素添加CSS样式

语法：

css("属性","属性值") ;

css({"属性1":"属性值1","属性2":"属性值2"...}) ;

设置元素的显示和隐藏的语法如下：

设置显示：$(selector).show( );

设置隐藏：$(selector).hide( );

例如：

$(".nav-top").show( );
$("p").hide( );

链式操作

对一个对象进行多重操作，并将操作结果返回给该对象，以便于将返回结果应用于该对象的下一次操作。

例如：

<body>
<h2>什么是受益人?</h2>
<p>
    <strong>解答：</strong>
    受益人是指人身保险中由被保险人或者投保人指定的
    享有保险金请求权的人，投保人、被保险人可以为受益人。
</p>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("h2").click(function(){
//next方法的作用是获得匹配元素集合中每个元素其后紧邻的同辈元素。
            $("h2").css("background-color","#CCFFFF").next().css("display","block");
        });
    });
</script>
</body>

隐式迭代

在JQuery编写中，除了链式操作外，还有一种方式，即隐式迭代，如下代码的无需列表中对所有<li>标签中的字体设置样式，例如：

<body>
<ul>
    <li>数码产品</li>
    <li>家用电器</li>
    <li>妇幼保健</li>
    <li>时尚丽人</li>
</ul>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });
</script>
</body>

DOM对象和JQuery对象

DOM对象：直接使用JavaScript获取的节点对象

例如：

var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
等同于
document.getElementById("title").innerHTML;

注： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

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

1、JQuery对象转换成DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName"); //JQuery对象
var txtName =$txtName[0]; //DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName"); //JQuery对象
var txtName =$txtName.get(0);//DOM对象

2、DOM对象转换成JQuery对象

使用$()函数进行转化：$(DOM对象)

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

注：jQuery对象命名一般约定以$开头

在事件中经常使用$(this)，this是触发该事件的对象

猜你喜欢