一、什么是jQuery

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示： 除此之外，Jquery还提供了大量的插件。

 

二、为什么使用jQuery

写起来简单，省事，开发效率高，兼容性好

三、jQuery介绍
- 版本
      - 1.x
         兼容IE8。。。
      - 3.x
         最新
   - .min.xx
      压缩的：生产环境用
   -  没有压缩的（没有.min.xx）：开发用

四、如何使用jQuery
导入：



<script src="../js/jquery-3.3.1.js"></script>



或者：



<script src="jquery-3.3.1.min.js"></script>




　　

五、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作
实例：
$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素



　　

六、jQuery选择器

  • 元素选择器

　　jQuery 元素选择器基于元素名选取元素。

     在页面中选取所有 <p> 元素:

实例：

用户点击按钮后，所有 <p> 元素都隐藏：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">

    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();

            });

        });
    </script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<button>点我</button>

</body>
</html>



　　

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：$("#test")



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">

    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#test").hide();

            });

        });
    </script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另一个段落</p>
<button>点我</button>

</body>
</html>




  • 　.class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。
    语法如下：$(".test")　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">

    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(".test").hide();

            });

        });
    </script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落</p>
<p>这是另一个段落</p>
<button>点我</button>

</body>
</html>

CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例

下面的例子把所有 p 元素的背景颜色更改为红色：

  • $("p").css("background-color","red");

 

基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
</head>
<body>
    <ul>
        <li>哈哈哈哈，基本过滤选择器</li>
        <li>洛洛</li>
        <li>宝刀屠龙</li>
        <li>降龙十八掌</li>
    </ul>

</body>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        //获取第一个：first，获取最后一个：last
        //奇数
        $('li:odd').css('color','red');
        //偶数
        $('li:even').css('color','yellow');

        //选中索引值为1的元素
        $('li:eq(1)').css('font-size','100px');

        //大于索引值1
        $('li:gt(1)').css('font-size','50px');

        //小于索引值1
        $('li:lt(1)').css('font-size','12px');

    })
</script>
</html>



  • 　　筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <p class="p1">
            <span>我是第一个span标签</span>
            <span>我是第二个span标签</span>
            <span>我是第三个span标签</span>
        </p>
        <button>按钮</button>
    </div>
    <ul>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

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

    //获取第n个元素，数值从0开始
    $('span').eq(1).css('color','#FF0000');

    //获取第一个元素：first：last  点语法：get方法和set方法
    console.log($('span').last());
    $('span').last().css('color','greenyellow');

    console.log($('span').parent('.p1'));
    $('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'});

    //.siblings()选择所有的兄弟元素
    $('.list').siblings('li').css('color','red');

    //.find()
    //查找所有的后代元素
    $('div').find('button').css('background','yellow')
</script>
</html>



　　

练习题

 

答案：