JavaWeb--jquery篇

概述

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

引入jquery文件

javascript 复制代码

<!-- 引入在线路径 -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
<script src="../jquery/jquery.min.js"></script>

jquery.js 是未压缩版
jquery.min.js是压缩版

引入的jqery标签的顺序要在你的js之前引入

优点

访问和操作dom元素更简单;
控制页面样式更优秀;
对页面事件处理简单;
可扩展的jquery插件。

jquery和js的不同

jquery是对js的封装，js能做到的jquery不一定能做到，但是jquery能做到的js一定能做到

入口函数

javascript 复制代码

//jquery入口函数
    $(function(){


        console.log(jQuery)
        console.log($)


    })

入口函数的不同点

JavaScript 的入口函数是会等到所有内容，包括外部图片之类的文件加载完后，才执行。
jQuery的入口函数会等到全部DOM元素加载完毕，但不会等到图片也加载完毕，就会提前执行。
JS的入口函数如果有多个，后面创建的入口函数会覆盖前面创建的入口函数，说白了就只能有一个入口函数
jQuery的入口函数可以有多个，后面创建的入口函数不会覆盖前面的入口函数。

js对象和jquery对象的相互转换

javascript 复制代码

 //获取js对象
   let jsBox =  document.getElementsByClassName('box')[0];
    console.log(jsBox)

   
    // jsBox.addEventListener()

   //获取jquery对象
    console.log(  $('.box'))
    

    //js对象和jquery对象的方法是不能公用的
    // $('.box').addEventListener('click',function(){
    //     console.log(123)
    // })

     //js对象和jquery对象之间的相互转换

    // js对象转 jquery对象
      $(jsBox).css('color','red')

     //jquery转js对象
    //  通过[索引] 或者 get(索引)的方式
     $('.box').get(0).addEventListener('click',function(){
        console.log('被点击了')
     })

jquery选择器

过滤选择器

表单过滤选择器

操作内容

修改样式

操作类名

jquery控制元素显示和隐藏

jquery事件

javascript 复制代码

$().on(事件, 子对象,data 
) 
// 其中 子对象可写可不写;// 事件: 使用最常用的map键值对的方式进行编写: 
$().on( 
{ '事件类型':function(){}, 
  '事件类型':function(){} 

} 
)


 $().off('被移除的事件'); 

    // $('div').on({

    //         'click': function (e) {
    //             console.log('单机事件')
    //             console.log($(e.currentTarget).attr('index'))
    //         },
    //         'dblclick':function(){
    //             console.log('双机事件')
    //         },
    //         'mouseover':function(){
    //             console.log('划入事件')
    //         }
    //     }
    // )


    $('body').on('click','div',function(){
        console.log(123)
    })

jquery遍历方式

javascript 复制代码

 $('ul>li').each(function(i,e){
        //i 索引
        //e 当前的元素
        console.log(i,e)

    })

操作节点

javascript 复制代码

 $('button:eq(1)').on('click',function(){

            //清空后代元素
            $('ul').empty();
        })

        $('button:eq(2)').on('click',function(){

            //删除元素
            $('ul').remove();
        })

代码实现

html 复制代码

<!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="../jquery/jquery.js"></script>
</head>

<body>

    <button>添加</button>

    <button>empty</button>
    <button>remove</button>

    <button>查询父元素</button>
    <button>查询子元素</button>
    <button>查询后代元素</button>


    <button>返回除自已以外的所有兄弟元素</button>
    <button>返回下一个兄弟元素</button>
    <button>返回后面所有的兄弟元素</button>

    <ul>
        <li class="one">
            <span>456</span>
        </li>
    </ul>

</body>
<script>
    $(function () {

        $('button:eq(0)').on('click', function () {

            //创建节点
            let li = document.createElement('li');

            $(li).text('我是li')

            //将 li节点 添加到ul中

            //父元将将子元素添加到末尾; 
            $('ul').append(li)
            //父元将将子元素添加到开头; 
            // $('ul').prepend(li)


            //把a追加到b的内部，位置位于b的结尾; 
            // $(li).appendTo($('ul').get(0))
            // $(li).prependTo($('ul').get(0))


            //将元素添加到此元素的后面
            // $('.one').after(li)
            //将元素添加到此元素的前面
            // $('.one').before(li)


        })



        $('button:eq(1)').on('click', function () {

            //清空后代元素
            $('ul').empty();
        })

        $('button:eq(2)').on('click', function () {

            //删除元素
            $('ul').remove();
        })




        $('button:eq(3)').on('click', function () {

            //查询父元素
            console.log($('ul').parent());
        })

        $('button:eq(4)').on('click', function () {

            //查询子元素
            console.log($('ul').children());
        })
        $('button:eq(5)').on('click', function () {

            //查询后代元素
            console.log($('ul').find('*'));
        })



        $('button:eq(6)').on('click', function () {

            //查询除自己所有的兄弟元素
            console.log($('.one').siblings());
        })

        $('button:eq(7)').on('click', function () {

            //查询下一个兄弟元素
            console.log($('.one').next());
        })

        $('button:eq(8)').on('click', function () {

            //获取之后所有的兄弟元素
            console.log($('.one').nextAll());
        })
    })


</script>

</html>