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;width: 100px;background-color: cornflowerblue"></div>

<div class="box2" style="height: 100px;width: 100px;background-color: burlywood"></div>

<div class="box3" style="height: 100px;width: 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>

　　

　　

web前端-框架jquery的更多相关文章

  1. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  2. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  3. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  4. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  5. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  6. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  7. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  8. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

  9. web前端框架选型

    1.1.界面使用脚本语言有html5,php5,css3,js动态库jquery等 1.2.html采用技术为最新html5技术,html5生成的页面在phone.pad.Phablets.pc也可方 ...

随机推荐

  1. Android SearchView不显示搜索icon

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/80 背景: 之前碰到了一个页面展示问题,SearchVie ...

  2. 【Servlet】JavaWeb应用的执行流程

    Tomcat与Servlet简介 Tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.S ...

  3. 微服务（入门学习五）：identityServer4+ocelot+consul实现简单客户端模式

    简介 主要是采用identity Server4 和ocelot 加上consul 实现简单的客户端模式 开发准备  环境准备 下载并安装Consul具体请参考前几篇的内容 项目介绍 创建ocelot ...

  4. [20191012]使用bash从sql_id计算hash_value.txt

    [20191012]使用bash从sql_id计算hash_value.txt --//没有什么实际意义,仅仅验证方法是否可行.--//sql_id的计算是使用MD5算法进行哈希,生成一个128位的H ...

  5. bayaim_hadoop 开篇 0.0

    ------------------bayaim_hadoop 开篇 0.0 -----2018年11月19日09:21:46--------------------------------- 前言: ...

  6. Windows 10 路由表管理

    基本管理命令: route print route命令基本格式: ROUTE [-f] [-p] [-|-] command [destination] [MASK netmask] [gateway ...

  7. axios如何先请求A接口然后在请求B接口

    总结:在第一个then的请求结束后,在添加一个then,表示请求第二个接口,在第二个then里面写第二个接口的请求方式 axios.get("./a.json").then(res ...

  8. Html学习之三（列表）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. CodeForces 984C Finite or not?

    http://codeforces.com/problemset/problem/984/C Time limit    1000 msMemory limit    262144 kB 题目 You ...

  10. luoguP4103 [HEOI2014]大工程

    题意 建出虚树DP. 设\(f[i]\)表示i的子树的第一问答案,\(minn[i]\)表示\(i\)的子树中到\(i\)最近的关键点,\(maxx[i]\)表示\(i\)的子树中到i距离最远的关键点 ...