zoukankan      html  css  js  c++  java
  • web前端-框架jquery

    1.jquery库

      就是js的库 ,可以通过jquery语法简化js操作 ,如文档遍历 ,文档操作 ,事件处理 ,动画js定时器等等

    2.引用

      下载:https://www.bootcdn.cn/jquery

      引用:加入一条js在文档中<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>

      

    3.jquery的选择器

      1)基本选择器(与css一致)

        #      id选择器

        .       类选择器

        标签      标签选择器

        *       通配符选择器

      2)高级选择器(与css一致)

        空格 空格   后代选择器

        > >     自带选择器

      3)过滤选择器(特殊)

        :eq(index)  选择对象集合指定索引的dom,返回jq对象

        :first      选择对象集合第一个dom对象,返回jq对象

        :last      选择匹配的最后一个dom对象,返回jq对象

      4)jeuery的链式编程筛选方法 ,jquery对象才有的方法 ,返回jq对象

        find(选择器)   查找指定后代元素

        children()     查找指定元素的子代

        siblings()      查找兄弟元素

        parent()     查找父元素

        eq(index)     查找jq集合对象中第几个对象

      5)语法

        $('选择器').筛选方法().筛选方法()....

      6)js对象转换为jquery对象

        $(js对象)

    ###
    <
    body> <div class="j1"> <ul> <li>111A</li> <li>222B</li> <li>333C</li> <li>444D</li> </ul> </div> <div class="j2"> <ul> <li>111A</li> <li>222B</li> <li>333C</li> <li>444D</li> </ul> </div> <script src="jsjquery.js"></script> <script> $('.j1 ul li:eq(2)').css({'color':'red','font-size':'30px'}); $('.j1 ul li:last').css({'color':'green','font-size':'30px'}); $('.j1 ul li:first').css({'color':'blue','font-size':'30px'}); let test = $('.j2'); test.children().children().eq(1).siblings().css({'color':'blue'}); test.find('li:eq(1)').css({'color':'red'}); console.log(test.children().parent()); </script> </body>

    4.jquery的文档操作

      对值操作

        text()      修改内容

        html()        修改整个元素

        val()        修改值, 如input的value

      对属性操作

        arrt({'属性':'值' ,'属性':'值' ,'属性':'值'})    设置属性

        removeAttr('属性', '属性')          删除属性

      对样式操作

        css()

      对类选择器操作

        addClass()

        removeClass()

        toggleClass(A)               开关操作(如通过点击事件触发 ,如果有A这个类就移除 ,没有就添加)

      对父子标签操作

        父对象.append('标签')          #父元素插入新子元素

        子对象.appendTo('父对象选择器')     #子元素插入指定的父元素

      对兄弟标签操作

        对象A.after(对象B)           #A的后边插入B

        对象A.before(对象B)           #A的前边插入B

        对象A.insertAfter(对象B)          #A插入到B的后边

        对象A.after(对象B)           #A插入到B的前边

      替换操作

        对象A.replacewith(对象B)        #替换一个标签

        对象A,replaceall(对象B)           #替换所有匹配标签

      删除操作

        对象A.remove()             #对象A删除

        对象A.empty()               #清空对象A和自己后代所有元素

    ####练习
    <
    body> <div class="d1"></div> <div class="d2"></div> <div class="d3"> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> </div> <div class="d4"> <span>span1</span> <span>span2</span> </div> <div class="d5"> <input type="text"> <a href="">put</a> <p>p1</p> <p>p2</p> <span>remove</span> </div> <script src="jsjquery.js"></script> <script> $('input').val('testbaby'); let test = document.getElementsByClassName('d1'); test = $('a'); test.attr({'href': 'https://www.baidu.com', 'test': '666'}); test.removeAttr('test'); test.css({'color': 'blue'}); test.addClass('b1 k1 d1'); test.removeClass('k1'); test.toggleClass('d1'); //因为ddd存在所以这里是移除 let test1 = $('<h1>test1</h1>'); let divd1 = $('.d2'); test1.appendTo(divd1); $('.d1').append('<h1>test1</h1>'); let test2 = $('.d3'); test2.find('ul').children().eq(1).after('<li>ttt</li>'); $('<li>eee</li>').insertAfter(test2.find('li').eq(3)); $('.d4').children().eq(0).replaceWith('<h2>span1</h2>'); $('<h3>p</h3>').replaceAll($('.d5>p')); $('.d5 > span').remove(); //$('.d5').empty(); </script> </body>

    5.jquery的事件触发

     鼠标事件

      click(fn)       单击事件

      dbclick(fn)      双击事件

      mouseleave(fn)   鼠标悬浮移除事件

      mouseenter(fn)    鼠标悬浮

      mousedown(fn)   鼠标按下事件

      mouseup(fn)     鼠标弹起事件

     语法: jq对象.事件(fn)

    ####互斥选项卡
    <
    body> <div class="d1"> <button>top1</button> <button>top2</button> <button>top3</button> <button>top4</button> </div> <script src="jsjquery.js"></script> <script> $('.d1 button').click(function () {                  ##所有的button按钮的dom对象都关联了click事件,jq帮我们完成了遍历 $(this).siblings().removeClass('b1'); $(this).addClass('b1') }) </script> </body>

    6.jquery的简单动画效果

      由js定时器实现效果

      stop()      清除对象的定时器

      hide(时间)    在规定时间内渐变隐藏元素(display: none)

      show(时间)     在回定时间渐变展示元素

      toggle()      开关元素的显示和关闭

      fadeOut()      淡出

      fadeIn()      淡入   

    <body>
    <button>open</button>
    <div class="box1" style="height: 100px; 100px;background-color: cornflowerblue"></div>
    <div class="box2" style="height: 100px; 100px;background-color: burlywood"></div>
    <div class="box3" style="height: 100px; 100px;background-color: cadetblue"></div>
    
    <script src="jsjquery.js"></script>
    <script>
        $('.box1').mouseenter(function () {
            $(this).stop().hide(2000);
        });
        $('.box1').mouseleave(function () {
            $(this).stop().show(2000);
        });
        $('button').click(function () {
            $('.box1').toggle(1000);
        });
        $('.box3').mouseenter(function () {
            $(this).stop().fadeOut(1000)
        });
        $('.box3').mouseleave(function () {
            $(this).stop().fadeIn(1000)
        })
    </script>
    </body>

    7.ajax

      异步刷新 ,需要后端传数据 ,根据传来的数据生成标签 

      因为异步 ,如果要处理将要生成的标签A ,可以给A的父标签设置代理on ,jq父对象.on('事件','A标签')      #A标签可以是个jq的对象集合

    <body>
    <!--数据插入li标签-->
    <ul class="list1">
    
    
    </ul>
    <div id='box' style="color: coral"></div>
    <!--ajax是前后端协同,因此必须要一个后端数据,我们调用一下-->
    <!--模拟从后端拿数据,局部刷新-->
    <script src="jsjquery.js"></script>
    <script>
        //直接调用jq的ajax()方法,字典写法
        $.ajax({
            //第一个请求url
            url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
            //第二个请求类型
            type:'get',
            //第三个如果请求成功,获取数据放入函数的形参中去,res对象下的data数组
            success:function (res) {
                console.log(res);
                if(res.error_no === 0){
                    //底层for循环遍历data列表中的每一个值(字典)和索引,取出字典中的值给ul追加li标签
                    res.data.forEach(function (item,index) {
                        //为ul便签添加子li标签,必须用``模板,动态获取函数参数,字典中的name的值
                        $('.list1').append(`<li catid='${item.id}'>${item.name}</li>`)
                    })
                }
            },
            //第四个如果请求出错,返回是否出错
            error:function (res) {
                // console.log(res)
            }
        });
        //异步原因,此处执行在了ajax的前面,是个空对象!!要使用代理
        // console.log($('li'));
        // $('li').click(function () {
        //     console.log($(this).attr('catid'));
        // });
        //代理执行事件on,当我完成不了对未来元素操作时,交给代理,代理是父元素的方法,绑定子标签,标签可以是存在或未来的
        $('ul').on('click','li',function () {
            //这里的this是子标签li , 并取出该li的id属性值 ,用于后面请求url做拼接使用
            let catid = $(this).attr('catid');
            console.log(catid);
            $.ajax({
                //模板字符串
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${catid}&ordering=`,
                type: 'get',
                success:function (res) {
                    console.log(res);
                }
            })
        })
    </script>
    </body>

      

      

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 排队打水问题
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    Java实现 蓝桥杯VIP 算法提高 特殊的质数肋骨
    现在使用控件, 更喜欢继承(覆盖控件已有的函数,很奇怪的一种使用方式)
    Controls 属性与继承 TShape 类的小练习(使用TShape可以解决很多图形问题)
    QT创建窗口程序、消息循环和WinMain函数(为主线程建立了一个QEventLoop,并执行exec函数)
  • 原文地址:https://www.cnblogs.com/quguanwen/p/11353254.html
Copyright © 2011-2022 走看看