美文网首页
07_JQuery(前端框架)

07_JQuery(前端框架)

作者: 渐进逾 | 来源:发表于2019-09-29 18:29 被阅读0次

jquery介绍

是一个js框架，简化js的编写。jquery宗旨：write less do more。
jquery的插件丰富，所谓插件就是利用jquery技术写一个独立效果.

使用实现步骤

下载jquery，官网www.jquery.com
jQuery以后企业开发中使用生产版本。生产版本(xxx.min.js),体积小，传输快。

js与jq的区别
jquery与js的区别1-js与jq(jquery)的加载事件

1.js的加载完成事件要求每个页面只能有一个，多个的话下面的会覆盖上面的
2.jq的加载完成事件可以有多个，都会运行【推荐使用】

jquery与js的区别2-对象获取与注册事件不同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js和jq区别</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="b1" value="我是JS对象">
    <input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
    /*
    * 目标1:js与jq获取对象的区别
    *       js获取对象的语法：document.getElementXXXX(),  简称使用document系列方法获取
    *       jq获取对象的语法：$("选择器"),  简称使用$和选择器获取
    * 目标2：js与jq对象注册事件方式的区别
    *       js对象注册事件语法： js对象.onclick=function(){...}
    *       jq对象注册事件语法： jq对象.click(function(){...})
    * */

    //使用js对象注册点击事件并弹出按钮的value属性值
    var jsObj = document.getElementById("b1");
    jsObj.onclick = function () {
        //获取value值并弹出
        alert(jsObj.value);  //value属性是js对象的成员
    };

    //使用jq对象注册点击事件并弹出按钮的value属性值
    var jqObj = $("#b2");
    jqObj.click(function () {
        //获取value值并弹出,this是当前事件源按钮的对象
        alert(this.value);  //this是js对象，js对象就有value属性
    });

</script>
jquery与js的区别3-jq与js对象之间转换

以后会使用jq对象操作DOM，经常将js对象转换为jq对象，之后再操作DOM。

js转换为jq：
jQuery框架对jq对象提供丰富的api方法，简化js的操作。
转换语法：

  1. js对象转换jq对象语法【重要】
   $(js对象) = jq对象
  1. jq对象转换为js对象语法【了解】
   jq对象[0]  或者  jq对象.get(0)

jq对象理解为类似于一个js数组，通过下标的方式获取里面的元素就是js对象
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js和jq区别</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="b1" value="我是JS对象">
    <input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">


    //使用js对象注册点击事件并弹出按钮的value属性值
    var jsObj = document.getElementById("b1");
    jsObj.onclick = function () {
        //获取value值并弹出

        //JS--》JQ对象【重要】  jq对象获取value的语法：jq对象.val();
        alert($(jsObj).val());

    };

    //使用jq对象注册点击事件并弹出按钮的value属性值
    var jqObj = $("#b2");
    jqObj.click(function () {
        //获取value值并弹出,this是当前事件源按钮的对象

        //JQ--》JS对象
        alert(jqObj[0].value);
    });

</script>
jQuery选择器1-基本选择器
image.png

代码实现：

<script type="text/javascript">
        // 1) 改变 id 为one的元素的背景色为红色
        $("#b1").click(function () {
            //js操作背景色方式1：js对象.style.backgroundColor="red";
            //js操作背景色方式2：js对象.style="background-color:red";
            //jq操作背景色方式1：jq对象.css("backgroundColor","red");
            //jq操作背景色方式2：jq对象.css("background-color","red");

            $("#one").css("background-color","red");

        });
        // 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
        $("#b2").click(function () {

            $("div").css("background-color","red");

        });

        // 3) 改变 class 为 mini 的所有元素的背景色为 红色
        $("#b3").click(function () {

            $(".mini").css("background-color","red");

        });
    </script>
jQuery的选择器2-层级选择器
image.png

代码实现：

<script type="text/javascript">
    //1) 改变 <body> 内所有 <div> 的背景色为红色
    $("#b1").click(function () {
        $("body div").css("background-color","red");
    });

    //2) 改变 <body> 内子 <div> 的背景色为 红色
    $("#b2").click(function () {
        $("body>div").css("background-color","red");
    });

    //3) 改变 id为two的下一个div兄弟元素的背景色为红色
    $("#b3").click(function () {
        $("#two+div").css("background-color","red");
    });
</script>
jQuery的选择器3-属性选择器
image.png

实现代码：

<script type="text/javascript">
        //1) 含有属性title 的div元素背景色为红色
        $("#b1").click(function () {
            $("div[title]").css("background-color","red");
        });

        //2) 属性title值等于test的div元素背景色为红色
        $("#b2").click(function () {
            $("div[title=test]").css("background-color","red");
        });

        //3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
        $("#b3").click(function () {
            $("div[title!=test]").css("background-color","red");
        });

        //4) 选取有属性id的div元素，然后在结果中选取属性title值等于“test”的 div 元素背景色为红色
        $("#b4").click(function () {
            $("div[id][title=test]").css("background-color","red");
        });
    </script>
jQuery的选择器4-基本过滤选择器
image.png

实现代码：

<script type="text/javascript">
    //1) 改变第一行的背景色为浅灰色 light+color  == 浅颜色； dark+颜色=深颜色
    $("#b1").click(function () {
        $("tr:first").css("background-color","lightgray");
    });

    //2) 改变最后一行的背景色为lightgreen浅绿色
    $("#b2").click(function () {
        $("tr:last").css("background-color","lightgreen");
    });

    //3) 改变除第1行和最后1行的其它行背景色为lightyellow浅黄色
    $("#b3").click(function () {
        $("tr:not(:first):not(:last)").css("background-color","lightyellow");
    });

    //4) 改变索引值为偶数的行背景色为lightpink浅粉色，下标从0开始
    $("#b4").click(function () {
        $("tr:not(:first):not(:last):even").css("background-color","lightpink");
    });

    //5) 改变索引值为奇数的行背景色为aquamarine深蓝色
    $("#b5").click(function () {
        $("tr:not(:first):not(:last):odd").css("background-color","aquamarine");
    });

    //6) 改变索引值大于 3 的tr元素的背景色为oldlace浅米色
    $("#b6").click(function () {
        $("tr:gt(3)").css("background-color","oldlace");
    });

    //7) 改变索引值等于 3 的tr元素的背景色为antiquewhite古董白
    $("#b7").click(function () {
        $("tr:eq(3)").css("background-color","antiquewhite");
    });

    //8) 改变索引值为小于 3 的tr元素背景色为yellowgreen黄绿色
    $("#b8").click(function () {
        $("tr:lt(3)").css("background-color","yellowgreen");
    });
</script>
jQuery的选择器5-表单属性过滤选择器
image.png
案例：隔行换色
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $(function () {

        //目标：页面加载后偶数行为粉红色，奇数行为黄色
        $("tr:gt(1):even").css("background-color","pink");
        $("tr:gt(1):odd").css("background-color","yellow");
    });
</script>
jQuery的DOM操作1-html代码-文本-值

语法：


image.png
jQuery的DOM操作2-属性操作

语法：


image.png
jQuery的DOM操作3-样式操作

class的操作：


image.png
jQuery的DOM操作4-元素节点创建-插入-移动

语法：


image.png
jQuery的DOM操作5-元素的删除

语法：


image.png

实现代码：

<script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.给每个表情（li内部的img）注册点击事件
            $("li img").click(function () {

                //2.将当前点击的表情对象添加到请发言.word标签内部最后子元素位置
                //this，就是事件源触发的一个对象，这是js对象
                //$(".word").append($(this));  //这样写会发生点一个丢一个,将原对象移走了

                //疑问：怎么解决原位置不动，目标位置出现表情？答：可以对原对象进行克隆出一个一模一样的对象，移动到目标位置
                //克隆：复制出一个一模一样的对象，数据一样，对象的内存地址不一样， 语法： jq对象.clone();

                $(".word").append($(this).clone());

            });

        });

    </script>

######### jquery循环遍历

目标

循环遍历方式：

/*
    * 循环遍历方式：
    *   1.js传统循环方式
    *          格式：for(var i=0;i<length;i++){...}
    *   2.js新标准es6的for-of循环【推荐，以后再vue框架中使用】
    *          格式：for(var item of jq对象/数组){...}
    *          说明：item是数组的每个元素对象
    *                js遵守ECMASCRIPT规范，es6目前是最新规范，2015年出来
    *   3.jquery对象的each方法方式【推荐，web阶段使用】
    *           格式：jq对象.each(function(index,element){...});
    *           参数: function 是遍历的函数，每一次循环运行一次
    *           参数：index, 循环的索引，从0开始
    *           参数：element, 循环的每个元素对象，是一个js对象
    *   4.jquery全局each方法方式
    *           格式：$.each(jq对象,function(index,element){...})
    * */
jquery事件1—事件介绍与常用事件
image.png

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //得到焦点改变背景色pink
            $("#t1").focus(function () {
               $(this).css("background-color","pink");
            });
           
            //失去焦点改变背景色
            $("#t1").blur(function () {
                $(this).css("background-color","yellow");
            });
     
            //松开键，把英文改成大写
            //keyup键盘弹起事件
            $("#t1").keyup(function () {
                //字符串转换为大写的语法：string.toUpperCase();

                //1.获取输入的值
                var value = $(this).val();
                //2.转换为大写
                value = value.toUpperCase();
                //3.设置回文本框的value属性值
                $(this).val(value);
            });

            //jquery注册事件的链式写法
            //得到焦点改变背景色pink
            $("#t1").focus(function () {
                $(this).css("background-color","pink");
            }).blur(function () {
                $(this).css("background-color","yellow");
            }).keyup(function () {
                //字符串转换为大写的语法：string.toUpperCase();

                //1.获取输入的值
                var value = $(this).val();
                //2.转换为大写
                value = value.toUpperCase();
                //3.设置回文本框的value属性值
                $(this).val(value);
            });

        })
    </script>
</head>
<body>
用户名：
<input type="text" id="t1" value="" />
</body>
</html>
事件绑定与解绑
image.png

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件动态绑定</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="解绑事件" id="unbind">
</body>
<script type="text/javascript">
    //给按钮1使用事件名方式注册点击事件，弹出“按钮1”
    $("#b1").click(function () {
        alert($(this).val());
    });

    //使用on注册事件方式给b2注册点击事件，弹出“按钮2”
    $("#b2").on("click",function () {
        alert($(this).val());
    });

    //给unbind注册点击事件实现给b2解绑事件
    $("#unbind").click(function () {
        $("#b2").off();//解绑所有事件

        /*
        * 注意：off只能解绑动态注册的事件，就是使用js或jq代码注册事件
        *       off无法解绑html标签通过属性绑定的事件
        *            例子：<input type="button" value="按钮2" id="b2" onclick="demo();">  off是不能解绑
        *            解决方案： $("#b2").removeAttr("onclick");
        * */
    });
</script>
</html>

案例：给动态创建的元素绑定事件

案例需求：

  1. 有一个城市的有序列表，每个 li 有点击事件，点击以后弹出城市的名字
  2. 在下面的文本框中输入新的城市，点按钮添加到 li 列表中，会发现新加的城市没有点击事件。

  3. 使用上面的动态绑定的方法，可以让新加的城市支持点击事件。


    image.png

    代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加城市列表</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol id="city">
    <li>广州</li>
    <li>上海</li>
    <li>北京</li>
</ol>
城市名：<input type="text" id="t1" placeholder="请输入城市名">
<input type="button" id="b1" value="添加城市列表">

<script type="text/javascript">
    //给每个li添加点击事件，弹出自己的文本内容
    /*$("li").click(function () {
        alert($(this).text());
    });*/
    //注意：这个点击事件只适合页面上已有的元素绑定事件，而动态新增的元素是没有事件

    //使用on给已有和动态新增的元素绑定事件
    $("#city").on("click","li",function () {
        alert($(this).text());
    });

    //点击按钮事件，动态添加li
    $("#b1").click(function () {
        //1.获取输入的城市名字
        var city = $("#t1").val();
        //2.将新收入的城市名字加入到城市列表
        $("#city").append("<li>"+city+"</li>");
    });
</script>
</body>
</html>

相关文章

  • 07_JQuery(前端框架)

    jquery介绍 是一个js框架，简化js的编写。jquery宗旨：write less do more。jque...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 前端UI框架的定义

    在聊前端UI框架的定义之前，我们聊聊前端框架的用处，为什么使用前端框架？开发什么项目才会使用到前端框架？其实这些都...

  • NodeJS--01

    前端框架的发展历史 一篇文章了解前端框架演变前端框架的发展现状与趋势The best of JavaScript,...

  • 你为什么要使用前端框架Vue?

    1.前端框架的根本意义 1.1 前端框架的好处 最开始学习前端框架的时候(我第一个框架是 React)并不理解框架...

  • webpack实战之（手把手教你从0开始搭建一个vue项目）

    前言 我们前面从前端架构： 前端框架系列之（装饰器Decorator） 前端框架系列之（vue-class-com...

  • 初学者项目展示

    danyuan-application 系统采用技术或开源框架： 前端框架：adminLTE 前端技术：boots...

  • 关于封装框架总结

    关于封装框架总结 常见的框架 1、常见的框架学习前端的都知道，前端有很多的丰富的框架。例如：通用框架：jQuery...

  • vue Day1

    vue js是最火的一个前端框架，React是最流行的一个前端框架（React除了开发前端框架，还可以开发APP）...

  • 罗马不是一天建成的，编程不是一天学会的

    # 今天学了前端神器Brackets 前端框架Angular

网友评论

      本文标题：07_JQuery(前端框架)

      本文链接：https://www.haomeiwen.com/subject/rhvfectx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|07_JQuery(前端框架)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！