jQuery入门-初识jQuery

目录

什么是jQuery?

下载jQuery

jQuery的入口函数

对比JavaScript的入口函数jQuery的入口函数,执行时机

jQuery对象和DOM对象的区别

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

$符号的实质

jQuery的基本选择器&层级选择器

Mouseenter和mouseover的区别

jQuery的过滤选择器&筛选选择器

index方法详解


 

什么是jQuery?

jQuery是一个快速,小巧,功能丰富的JavaScript库。 它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。 通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。

 

下载jQuery

官方网址:http://jquery.com/

 

拉到底部,点击这里,我们可以看到过去jQuery发布的版本

 

而这里,能查看到所有的版本。

 

点开可以看到很多个版本,有3.0的,有2.0的。

 

下载版本时要注意浏览器的兼容问题,从jQuery2.0起就不再兼容IE6-8,国内使用JQuery主要是为了兼容IE6-8,所以我这里下载1.x版本的

 

 

类似百度等网站使用的jQuery也是1.x版本的

 

下载分为未压缩版和压缩版

 

 

压缩版和未压缩版的区别除了文件大小以外

压缩版的代码删除了一些注释、空格,基本没有阅读性,所以压缩版更适合生产环境

未压缩版适合学习和开发环境

除此以外没有其他区别

 

空白处右键另存为即下载成功

 

jQuery的入口函数

首先要引入jQuery(我这里写了自己电脑上的jQuery的绝对路径,在开发中,一般我们使用相对路径或者从网络上加载资源)

<script type="text/javascript" src="D:\Development\jQuery\jquery-1.12.4.js"></script>

 

其次,写入口函数,当然入口函数有两种写法

         // JQuery入口函数第一种写法
         $(document).ready(function () {

                   alert("jQuery入口函数第一种写法");

         });



         // JQuery入口函数第二种写法
         $(function () {

                   alert("jQuery入口函数第二种写法");

         });

 

$(document).ready 入口函数的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。简单地说,入口函数就是文档加载完要执行的函数。

 

下面看个示例:

示例1-1

<!DOCTYPE html>
<html>
<head>
	<title>jQuery入口函数</title>
</head>
<body>
	<div>jQuery_1</div>
	<div>jQuery_2</div>
	<div>jQuery_3</div>
</body>

<script type="text/javascript" src="D:\Development\jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript"> 
	// jQuery入口函数第一种写法
	$(document).ready(function () {
		alert("jQuery入口函数第一种写法");
	});

	// jQuery入口函数第二种写法
	$(function () {
		alert("jQuery入口函数第二种写法");
	})

</script>
</html>

演示效果

 

 

对比JavaScript的入口函数jQuery的入口函数,执行时机

文档的加载顺序是从上往下,边解析边执行

  1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
  2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

 

 

jQuery对象和DOM对象的区别

 

1.DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象。

<div id="div1">DOM对象</div>

var div1 = document.getElementById("div1");

div1.style.backgroundColor="pink";

 

  2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

<div id="div1">jQuery对象</div>

//jQuery的方法css(name, value)
$("#div1").css("backgroundColor","blue");

 

3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))

 

4.DOM对象与jQuery对象的方法不能混用。

DOM对象不能调用jQuery对象的方法

<div id="div1">DOM对象</div>

var div1 = document.getElementById("div1");

div1.css("backgroundColor","pink");

运行结果如图所示:

这里,你可以自己想想,前面我们说到,jQuery就好比DOM对象的一个伪数组,一个数组的元素可以调用数组的方法吗?

 

下面看一个示例:

示例1-2

<!DOCTYPE html>
<html>
<head>
    <title>jQueryTest2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
</ul>

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

    $(function () {
        console.log($("li"));
    })

</script>
</html>

演示效果

从示例1-2里,我们打印了jQuery对象,展开可以看到,jQuery对象就像是DOM对象的集合,封装了DOM对象。

说白了,就是jQuery对象里面放了一些DOM对象,然后自身也有一些jQuery方法。所以jQuery对象也不能直接调用DOM对象的方法。因此,DOM对象的方法和jQuery对象的方法不能混用。

 

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

下面我们看一个示例:

示例1-3

<!DOCTYPE html>
<html>
<head>
    <title>DOM对象和jQuery对象的转换</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
</ul>
<div id="div1">HelloWorld!!!</div>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script>

    $(function () {
        // DOM对象转换成jQuery对象
        var div1 = document.getElementById("div1");
        var $div1 = $(div1);
        $div1.text("Welcome to jQuery");

        // jQuery对象转换成DOM对象
        var $li = $("li");

        // 方法一:
        $li[0].style.backgroundColor = "red";
        $li[2].style.backgroundColor = "red";

        // 方法二:
        $li.get(1).style.backgroundColor = "blue";
        $li.get(3).style.backgroundColor = "blue";

    })

</script>
</html>

运行结果如图所示:

$符号的实质

我们这里还是用示例1-3的代码来讲解一下$符号的实质

var $li = $("li");

从左往右看,第一个$符号是可有可无的,代表这个变量是jQuery对象,当然不写也是可以的,不过一般为了能够比较容易区分jQuery对象和DOM对象,我们还是写上$符号。

// jQuery对象转换成DOM对象
//两种写法功能一样
var $li = $("li");
var li = $("li");

第二个$符号就不是可有可无的,我们可以将其看作是一个函数,这个函数的功能是将DOM对象转换为jQuery对象,返回值是一个jQuery对象。

下面我们打印一下$符号:

示例1-4:

<!DOCTYPE html>
<html>
<head>
    <title>$符号的实质</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>$符号的实质</div>
</body>

<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        console.log(typeof  $);
    })
</script>
</html>

运行结果如图所示:

$符号的三种用法

示例1-5:

<!DOCTYPE html>
<html>
<head>
    <title>$符号的实质</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>$符号的实质</div>
</body>

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

    // $符号的三种用法
    //1.入口函数
    $(function () {

    }

    //2.将DOM对象转换成jQuery对象
    $(domobj);

    // 3.参数是一个字符串,用来寻找对象,类似DOM的getElementById等之类的函数

    // 标签选择器:$("tagName") 例如
    //  <div>这是一个div</div>
    //  $("div")

    // ID选择器:$("#id")  例如
    // <button id = "#btn"></button>
    // $("#btn")

    // 类选择器:$(".class") 例如
    // <div class = "div1">这是一个div</div>
    // $(".div1")



</script>
</html>

 

jQuery的基本选择器&层级选择器

上面的示例中我们提到过了ID选择器,类选择器,标签选择器,下面我们再具体地介绍一下这些选择器

基本选择器

名称

用法

描述

ID选择器

$(“#id”);

获取指定ID的元素

类选择器

$(“.class”);

获取同一类class的元素

标签选择器

$(“div”);

获取同一类标签的所有元素

并集选择器

$(“div,p,li”);

使用逗号分隔,只要符合条件之一就可。

交集选择器

$(“div.redClass”);

获取class为redClass的div元素

 

层级选择器

名称

用法

描述

子代选择器

$(“ul>li”);

使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

后代选择器

$(“ul li”);

使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

示例1-6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的选择器</title>
</head>
<body>

<ul>
    <li id="one">我是第1个li</li>
    <li class="two">我是第2个li</li>
    <li>我是第3个li</li>
    <li id="green">我是第4个li</li>
    <li class="five">我是第5个li</li>
    <li class="yellow">我是第6个li</li>
    <li class="yellow">我是第7个li</li>
    <li class="yellow">我是第8个li</li>
    <li id="father">
        <p>我是第9个li</p>
        <span><p>这是获取不到的子孙元素</p></span>
    </li>
    <li id="mother">
        <p>我是第10个li</p>
        <span><p>这是获取得到的子孙元素</p></span>
    </li>
</ul>
<div>这是一个DIV</div>

</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>

    //jQuery的方法css(name, value)
    //name:样式名  value:样式值
    $(function () {

        //ID选择器$("#id");获取指定ID的元素
        $("#one").css("backgroundColor", "red");

        //类选择器$(".class");获取同一类class的元素
        $(".two").css("backgroundColor", "blue");

        //标签选择器$("div");获取同一类标签的所有元素
        $("div").css("backgroundColor", "pink");

        //并集选择器$("div,p,li");使用逗号分隔,只要符合条件之一就可。
        $("#green, .five").css("backgroundColor", "green");

        //交集选择器$("div.redClass");获取class为redClass的div元素(说白了,就是两个选择器粘一起)
        $("li.yellow").css("backgroundColor", "yellow");

        //子代选择器$("ul>li");使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
        $("#father>p").css("backgroundColor", "orange");

        //后代选择器	$("ul li");使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
        $("#mother p").css("backgroundColor", "purple");
    })

</script>

</html>

运行结果如图所示:

 

Mouseenter和mouseover的区别

我们这里利用w3school的一个例子来讲解

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

可以看到不管穿过mouseover注册的元素还是其子元素,都会触发其事件,而mouseenter事件只在经过其注册的元素才会触发事件,所以看起来,mouseover触发的事件会比较频繁,可能会导致效率低下,所以一般我们更加常用mouseenter事件。

为了能更区分地那我们再看一个示例

示例1-7

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/bg.jpg);
    }
    
    .wrap li {
      background-image: url(imgs/libg.jpg);
    }
    
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      //mouseover:鼠标经过事件
      //mouseout:鼠标离开事件
      
      //mouseenter:鼠标进入事件
      //mouseleave:鼠标离开事件
      
      var $li = $(".wrap>ul>li");
      
      //给li注册鼠标经过事件,让自己的ul显示出来
      $li.mouseenter(function () {
        //找到所有的儿子,并且还得是ul
        $(this).children("ul").show();
      });
  
      $li.mouseleave(function () {
        $(this).children("ul").hide();
      });
      
      
    });
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

运行结果如图所示:

如果上面的示例用mouseover和mouseout来做的话,会产生怎样的效果呢?

 

jQuery的过滤选择器&筛选选择器

ID选择器,类选择器,标签选择器归属于基本选择器,而并集选择器和交集选择器则归属于层级选择器。

当然,jQuery里面除了上面的基本选择器和层级选择器以外,还有个过滤选择器、筛选选择器

过滤选择器

这类选择器都带冒号:

名称

用法

描述

:eq(index)

$(“li:eq(2)”).css(“color”, ”red”);

获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

:odd

$(“li:odd”).css(“color”, ”red”);

获取到的li元素中,选择索引号为奇数的元素

:even

$(“li:even”).css(“color”, ”red”);

获取到的li元素中,选择索引号为偶数的元素

下面看示例1-8:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现隔行变色</title>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
</ul>

</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //:even下标为偶数,过滤
        $("li:even").css("backgroundColor","red");
        //:odd下标为奇数,过滤
        $("li:odd").css("backgroundColor","blue");
        //:eq 参数是伪数组的下标,过滤
        $("li:eq(5)").css("fontSize", "30px");
        //:gt 大于XXX下标,过滤
        $("li:gt(7)").css("fontSize", "27px");
    })

</script>

</html>

 

运行结果如图所示:

这里我介绍了部分过滤选择器,当然还有:first, :last等其他的过滤选择器,这里不作介绍

 

筛选选择器

筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

名称

用法

描述

children(selector)

$(“ul”).children(“li”)

相当于$(“ul>li”),子类选择器

find(selector)

$(“ul”).find(“li”);

相当于$(“ul li”),后代选择器

siblings(selector)

$(“#first”).siblings(“li”);

查找兄弟节点,不包括自己本身。

parent()

$(“#first”).parent();

查找父亲

eq(index)

$(“li”).eq(2);

相当于$(“li:eq(2)”),index从0开始

next()

$(“li”).next()

找下一个兄弟

prev()

$(“li”).prev()

找上一次兄弟

下面看示例1-9:

示例1-9:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery筛选选择器</title>
</head>
<body>
<div class="test">

    <div>我是第1个div</div>
    <div>我是第2个div</div>
    <div>我是第3个div</div>
    <div>我是第4个div</div>
    <div>我是第5个div</div>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</div>

<div class="test1">
    <div>
        <p>我是DIV里的p元素</p>
    </div>

    <ul>
        <p>我是ul里的p元素</p>
    </ul>

    <p>我是p元素</p>
</div>


</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //找 .test>ul下的所有子元素
        $(".test>ul").children().css("backgroundColor", "red");

        //找 .test>ul下的所有兄弟
        $(".test>ul").siblings().css("backgroundColor", "pink");

        //找 .test1下的所有p元素
        $(".test1").find("p").css("backgroundColor", "orange");
    })

</script>

</html>

运行结果如图所示

index方法详解

示例1-10:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的index方法详解</title>
</head>
<body>

<ul>
    <li><a href="#">我是第1个链接</a></li>
    <li><a href="#">我是第2个链接</a></li>
    <li><a href="#">我是第3个链接</a></li>
    <li><a href="#">我是第4个链接</a></li>
    <li><a href="#">我是第5个链接</a></li>
    <li><a href="#">我是第6个链接</a></li>
    <li><a href="#">我是第7个链接</a></li>
    <li><a href="#">我是第8个链接</a></li>
    <li><a href="#">我是第9个链接</a></li>
    <li><a href="#">我是第10个链接</a></li>
</ul>

</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
    $(function () {
       $("li").click(function () {
           //index方法会返回当前元素在所有兄弟元素里面的索引
           console.log($(this).index());
       })
    })
</script>

</html>

运行如图所示:(从上往下依次点击超链接)

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值