JQuery

2022-05-14  本文已影响0人  开心的小哈

把一些通用的函数事先写好，放在外部单独js文件中，在手动编写网页代码，就可重复使用这些通用函数，大大简化网页代码的编写工作，提高网页开发的效率。
john Resig于2006年初创建JQuery，也即开源的JQuer JavaScript开发库，HTML DOMM的很多复杂编程操作都可轻松实现，大大减轻web前端开发人员的变成难度，提高了编程效率
JQuery是一个快捷、小巧和特性丰富的javascript库，凭借简洁语法和跨平台性的兼容性，大大简化了js开发人员便利HTML文档，操作DOM，处理事件、执行动画和开发Ajax的操作，其独特而优雅的代码风格改变了js程序员的设计思路和编写程序的方式。
主流javascript库
JQuery、Protoype、YUI、Dojo
主要功能：
修改文档中的元素
修改页面外观
改变文档内容
相应用户的交互操作
为页面添加动态效果
无需刷新页面从服务器获取信息
简化常用的javascript任务

  1. 概念:一个JavaScript框架.简化js开发,本质上就是一些js文件,封装了js原生代码而已;
  2. 快速入门
  3. 步骤:1.下载JQuery,2.JQuery的js文件,3.使用
  4. jquer-xxx.js:开发版本.给程序员看的,有良好的缩进和注释信息
  5. jquery-xx-min.js生产版本.程序中使用,没有缩进.体积小程序加载更快;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div  id="div1"> 111</div>
    <div  id="div2"> 222</div>
<script>
var div1=$("#div1");
alert(div1.html());
var div2=$("#div2");
alert(div2.html());
</script>

</body>

</html>
  1. JQuery对象和js对象的区别与转换
    //JQuery对象在操作时更加方便.
    //JQuery对象和js对象方法不通用的
    //两者相互转换
    //jq-->js:jq对象[索引]或者jq对象.get(索引)
    //js-->jq:$(js对象)
  2. 选择器:筛选具有相似特征的元素(标签)
    基本语法学习
    1. 事件绑定 //给按钮添加点击事件
      $("#b1").click(function(){alert("ABC")});
    2. 入口函数 /**
      • window.onload和$(function())区别
      • window.onload只能定义一次,如果定义多次,后边会将前边的覆盖掉
      • $(function)可以定义多次
        */
    3. 样式控制
      $("#div1").css("backgroundColor","red");
  3. DOM操作
    1. 内容操作
      1. html():获取/设置元素的标签体内容<a><font>内容</font></a>
      2. text():获取/设置元素的标签体纯文本内容<a><font>内容</font></a>-->内容
      3. val():获取/设置元素的value属性值
    2. 属性操作
      1. 通用的属性操作
        1. attr():获取/设置属性的值
        2. removeAttr():删除属性的值
        3. prop():获取/设置属性的值
        4. removeProp():删除属性的值
        • 区别attr和prop区别?
          1. 如果操作的元素是固有属性,则建议使用prop
          2. 如果操作的元素是自定义属性,则建议使用atty
      2. 对class属性操作
        1. addClass():添加class属性值
        2. removeClass():删除class属性值
        3. toggleClass():切换class属性值
        • toggleClass("one"):判断如果元素对象上存在class="one",则将属性值one删除掉,如果元素对象上不存在class="one",则添加;
        1. css():
    3. CRUD操作
      1. append():父元素将子元素追加到末尾
        • 对象1.append(对象2);将对象2添加到对象1元素内部,并且在末尾;
      2. prepend():父元素将子元素追加到开头//同时也会将对象1的txt内容前面,会导致li出现问题;
        • 对象1.prepend(对象2);将对象2添加到对象1元素内部,并且在开头;
      3. appendTo():
        • 对象1.appendTo(对象2);将对象1添加到对象2内部,并且在末尾;
      4. prependTo():
        • 对象1.prependTo(对象2);将对象1添加到对象2内部,并且在开头;
      5. after():添加元素到对应元素后边
        • 对象1.after(对象2):将对象2添加到对象1后边.对象1和对象2是兄弟关系;
      6. before():
        • 对象1.before(对象2):将对象2添加到对象1前面.对象1和对象2是兄弟关系;
      7. insertAfter():
        • 对象1.insertAfter(对象2):将对象1添加到对象2后边.对象1和对象2是兄弟关系;
      8. insertBefore():
        • 对象1.insertBefore(对象2):将对象1添加到对象2前面.对象1和对象2是兄弟关系;
      9. remove():移除元素
        • 对象.remove();将对象删除掉
      10. empty():清空元素所有的后代元素.
        • 对象.empty();将对象后台元素全部清空,但是保留当前对象以及其属性节点;
  4. 案例:
    隔行换色

JQuery 高级

  1. 动画

    1. 三种方式显示和隐藏元素
      1. 默认显示和隐藏方式
        1. show(speed,easing,fn);
          1. speed动画的速度.三个预定义的值:slow normal fast或者输入毫秒值1000
          2. easing:用来指定切换效果,默认是 swing,可用参数 linear区别:
            • swing:动画执行时效果是先慢,中间快,后慢;
            • linear:动画执行速度是匀速的;
            • fn:在动画完成时执行的函数,每个元素执行一次.
        2. hide();
        3. toggle();
      2. 滑动显示和隐藏方式
        1. slideDown();
        2. slideUp();
        3. slideToggle();
      3. 淡入淡出显示和隐藏方式
        1. fadeIn();
        2. fadeOut();
        3. fadeToggle();

  2. 遍历

    1. js遍历方式
      • for(初始值;顺换条件;不常);
    2. jq的遍历方式
      • 返回值jq对象.each(callback);
      • $.each(object,[cllback]);
      • for..of:

  3. 事件绑定

    1. JQuery标准的绑定方式
    • jq对象.事件方法(回调函数)
    • 注:如果调用事件,不传递回调函数,则会出发浏览器默认行为(如.focus()让输入框获得焦点)
      • 表单对象.submit();//让表单提交
    1. on绑定事件/off接触绑定
    • jq对象.on("事件名称",回调函数)
    • jq对象.off("事件名称")
      • 如果off方法不传递任何参数,则将组件上的所有事件全部解除
    1. 事件切换toggle
    • jq对象.toggle(fin1,fin2...)
      • 当点击jq对象对应的组件后,会执行fin1,第二次点击会执行fin2...
      • 注意:1.9版本.toggle()方法删除,jquer Mirate(迁移)插件可以恢复此功能.
        <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

  4. 插件:增强jquer的功能

    1. 实现方式
      1. $.fn.extend(object)
        • 增强通过jquery获取的对象的功能("id")
      2. $.extend(object)
        • 增强JQuery对象自身的功能 $/Jquery
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $.fn.extend({
            chek:function(){
                //this调用该方法的jq对象
                this.prop("checked",true);
            },
            unchek:function(){
                this.prop("checked",false);
            }
        });
        $(function(){
         
     
    });
    function checkFn(){
        
           //获取复选框对象
           $("input[type='checkbox']").chek();
       }
       function uncheckFn(){
            //获取复选框对象
            $("input[type='checkbox']").unchek();
       }
    </script>
</head>
<body>
    <input id="check" type="button" value="select all" onclick="checkFn()">
    <input type="button" value="select ont all" onclick="uncheckFn()">
    <br />
    <input type="checkbox" value="ee">zuqiu
    <input type="checkbox" value="e2e">zuqiu
    <input type="checkbox" value="e3e">zuqiu

</body>
</html>

    $.extend({
            chek:function(a,b){
               return a>=b?a:b;
            },
            unchek:function(a,b){
                return a<=b?a:b;
            }
        });
        $(function(){
        var max=$.chek(5,3);
        alert(max);
    });
上一篇 下一篇

猜你喜欢

热点阅读