对于很多学习web的小伙伴们来说，jQuery的学习是非常重要的，jQuery能简化代码，带来更好的体验，今天就带大家来一起学习学习jQuery。

jQuery的概念

  • jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
  • j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
  • jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
  • jQuery本质： 就是学习调用这些函数（方法）。
  • jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

  1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
  2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
  3. 链式编程、隐式迭代。
  4. 对事件、样式、动画支持，大大简化了DOM操作。
  5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
  6. 免费、开源

jQuery的入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jQuery 选择器

基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号

jQuery文章管理系统模板 jquery论文_javascript

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

jQuery文章管理系统模板 jquery论文_javascript_02

筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下

jQuery文章管理系统模板 jquery论文_javascript_03

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.0.js"></script>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
        // var num = 7
        // console.log($('li:first')[0]);
        // console.log($('li').first());
        // console.log($('li:last')[0]);
        // console.log($('li:odd'));
        // console.log($('li:eq(5)')[0]);
        // console.log($('li').eq(num));
        // console.log($('li:eq(' + num + ')'));
        $('li:first').css('height', 50).css('backgroundColor', 'skyblue')
        $('li:eq(2)').css({
            'height': 60,
            'backgroundColor': 'pink'
        })
    </script>
</body>

</html>

开关灯案例用jQuery书写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.0.js"></script>
</head>

<body>
    <!-- <button id="btn"><span>关灯</span></button> -->
    <input type="button" id="btn" value="关灯">
    <script>
        var flag = 1
        $('#btn').click(function () {
            if (flag == 1) {
                $('body').css('backgroundColor', 'black')
                flag = 0
            } else {
                $('body').css('backgroundColor', 'pink')
                flag = 1
            }
        })
        // var btn = document.getElementById('btn')
        // btn.onclick = function () {
        //     if (this.innerText == '关灯') {
        //         document.body.style.backgroundColor = 'black'
        //         this.innerText = '开灯'
        //     } else {
        //         document.body.style.backgroundColor = 'white'
        //         this.innerText = '关灯'
        //     }
        // }
        // $('#btn').click(function () {
        //     if ($(this).val() == '关灯') {
        //         $('body').css('backgroundColor', 'black')
        //     }
        //     // console.log($(this).html('<p>6666</p>'))
        //     // console.log($(this).val('1231564'))
        // })
    </script>
</body>

</html>

今天的回顾就到这啦 我们下期见