jQuery简介、使用jquery

时间：2024-11-19 07:23:32

1.1 jQuery简介

jQuery 是一个 JavaScript 库。(库里封装了很多方法，我们可以直接调用执行)

write less, do more  写的更少，做的更多！

jquery是什么？是javascript框架（库）。集成了大量的方法，属性。

jQuery 极大地简化了 JavaScript 编程

jQuery 很容易学习

jquery英文官网

jquery中文官网

jQuery API 中文文档 | jQuery中文网

jquery中文官网

jQuery 教程 |

1.2 使用jquery

下载jquery-3.5.1下载，放置到你当前的项目中

在页面上如何引入jquery？

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

jquery在哪里？

$就是jQuery的别称

$是jquery中最强大最重要的一个函数名。主要有以下几个功能,也是jquery的核心功能。

$就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素

1 选择器。 例如 $("p")，$("#test")，$(".test")，$("button")

2 特效 。例如 $("p").hide()，$("p").show()3 ajax 。例如 $.get("")

  // $(document).ready(function(){
        //     ('ok');
        // })
        $(function(){
            ('ok!!');
            ("%c hello","color:blue;");
        })

预览：

div动态 展示与设置内容

 <style>
        div{
            width: 300px;
            height: 200px;
            background-color: #ccc;
            display: none;
        }
        </style>
    </head>
    <body>
        <button >展开</button>
        <button >设置内容</button>
        <div></div>
        <div></div>
        <div></div>
        <script>
            var btn1 = ('#btn1');
            var btn2 = ('#btn2');
            var divs = ('div');
            // 伪数组
            (divs);
             = function(){
                for(var i=0; i<=-1; i++){
                    divs[i]. = 'block';
                }
            }
             = function(){
                for(var i=0; i<=-1; i++){
                    divs[i].innerHTML = '我是div';
                }
            }
        </script>

 预览：

JQuery初体验

<style>
        div{
            width: 300px;
            height: 200px;
            background-color: #ccc;
            display: none;
        }
        </style>
    </head>
    <body>
        <button >展开</button>
        <button >设置内容</button>
        <div></div>
        <div></div>
        <div></div>
        <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.">
       
        </script>
        <script>
            $(function(){
                (1);
                $('#btn1').click(function(){
                    $('div').show();
                })
                $('#btn2').click(()=>{
                $('div').html('我是div标签')
                })
            })
        </script>

 预览：

JQuery入口函数和js入口函数区别

的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）

入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

<script src="js/jquery-3.5."></script>
    <script>
// JQuery入口函数和js入口函数的对比:
// 的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）
// 入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

    // js入口函数
     = function(){
        ('我是js入口函数')
    }

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

    $(function(){
        ('我是JQuery入口函数 第二种写法')
    })
    </script>

 

2、jQuery选择器

JQuery选择器的种类：基本选择器、层级选择器、过滤选择器、筛选选择器

2.2 jquery中的选择器分类

2.2.1 基本选择器

  1. ID选择器    $("#id");

  2. 类选择器    $(".class");

  3. 标签选择器  $("标签");

  4. 并集选择器  $("div,p,li");

  5. 交集选择器  $("");  获取class为redClass的div元素

1 $("#tit1")  id选择器

// 1.$("#tit1")  id选择器 
// html() 取得匹配元素的html内容
var tit1 = $("#tit1").html();
(tit1);

// html() 设置匹配元素的html内容
$("#tit1").html('小余你好');
var tit2 = $("#tit1").html();
(tit2);

2  $("ul")  元素选择器   $("ul li") 抓取的是一个集合

css() 访问匹配元素的样式属性 注意：样式属性当前这个元素身上 有 两个样式属性 color: orange; font-size:20px;

   <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li >我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 >我是标题</h1>
    <script>
        $(function(){
            $('ul li').css('color','blue')
           
        })
    </script>

 预览：

3  $('.msg') 类选择器

  <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li >我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 >我是标题</h1>
    <script>
        $(function(){
           $('.msg').css('color','blue');
           
        })
    </script>

 预览：

4   $("#tit1, .msg, ul") 群组选择器

<script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li >我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 >我是标题</h1>
    <script>
        $(function(){
            $('.msg, #tit').css('color','blue');//群组选择器
           
        })
    </script>

 预览：

5  :first获取第一个元素;   :not() 筛选 元素--去除所有与给定选择器匹配的元素

<script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li >我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 >我是标题</h1>
    <script>
        $(function(){
            $('.msg, #tit').css('color','blue');//群组选择器
           
        })
    </script>

 预览：

2.2.2 层级选择器

1.子代选择器  $("#parent>p");

 <div >
        <div>我是儿子1</div>
        <p>我是儿子2</p>
        <p>我是儿子3</p>
        <div>
            <p>我是孙子</p>
        <p>我是孙子</p>
        <p>我是孙子</p>
    </div>
    </div>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>
    <script>
        //子代选择器
       
        $(function(){
            $('#parent>p').css('color','red')
        })

 预览：

2.后代选择器  $("#parent div p");用法:跟css选择器一样

<div >
        <div>我是儿子1</div>
        <p>我是儿子2</p>
        <p>我是儿子3</p>
        <div>
            <p>我是孙子</p>
        <p>我是孙子</p>
        <p>我是孙子</p>
    </div>
    </div>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>
    <script>
        //子代选择器
       
       $(function(){
            $('#parent div p').css('color','green')
        })

 预览：

2.2.3 过滤选择器

:eq(index)  $("li:eq(2)").css("color","red");获取到li元素中索引号为2的元素，下标从0开始

:odd        $("li:odd").css("color","red");获取到的li元素中，索引号为奇数的元素

:even       $("li:even").css("color","red");获取到的li元素中，索引号为偶数的元素

 <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>
    </ul>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>
    <script>
        //按索引值去找
        $(function(){
        //  $('#list li:eq(1)').css('color',"red")
        //用方法去找元素
        // $('#list li').eq(1).css('color','red')
        $('#list li:even').css('color','blue')
        $('#list li:odd').css('color','red')

           
        })
    </script>

 预览：

隔行换色

 <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>
    </ul>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5."></script>
    <script>
        //按索引值去找
        $(function(){
   
        $('#list li:even').css('backgroundColor','skyblue')
        $('#list li:odd').css('backgroundColor','lightgreen')
        var backgroundColor=null;
        //移入

        $('#list li').mouseover(function(){
            //   ('yes');
            bgColor=$(this).css('backgroundColor')
            $(this).css('backgroundColor','green')
             
        })
     
       
        //移出
        $('#list li').mouseout(function(){
            $(this).css('backgroundColor',bgColor)
            (bgColor);
           
        })
    })
    </script>

 预览：

相关文章