• JQUERY 知识点的自我总结


    一、名词释义  

    1 js的入口函数:要等待文档树的加载完成,并且等待所有图片、文件都加载完成之后才开始执行。

    2  jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载

    3 js的入口函数:

         

      window.onload = function () {
    
               console.log("我是js的入口函数");
    
            };

     4 DOM对象:使用js的方法获取到的页面中的元素返回的就是DOM对象

    5 jquery对象:使用jquery的方法获取到页面中的元素,返回的就是jquery对象

    6 DOM对象只能调用DOM对象的属性和方法,不能调用jquery对象的属性和方法

    7 jquery对象不能调用dom对象的方法和属性

    基本选择器:设置样式:.css(“”,””);   css(name, value);
    
    过滤选择器:$(“li:odd”).css(“name”,”value”);
    
    $(“li:even”).css
    
    $(“li:eq(index)”).css    index是变量的话要冒冒加加     或者 .eq(index)

    查找的是所有后代元素,一般来说find这个参数是有必要

    二、操作部分1

    1、class操作: 添加类.addClass(“basic”);

      移除类.removeClass(“basic”);

      判断类.hasClass(“name”);

                  切换类.toggleClass(“name”);

    2、jQuery动画显示与隐藏.show(10000,function(){alert(“动画执行完了”);});    .hide()

               callback:回调,动画执行完了,才开始执行

    (改变的样式:widthheightopacity)

      滑入滑出:使用方法和显示隐藏使用方法基本一样

    slideDown  slideUp  slideToggle

    (改变的样式:height

    淡入淡出:用法与滑入滑出用法一模一样

                  .fadeIn   .fadeOut  fadeToggle  .fadeTo(1000,0.5)

    (淡入淡出修改的是opacity

    3、jQuery动画版下拉菜单:   $(this).children("ul").stop().slideDown();

    $(this).children("ul").stop().slideUp();

    4、jQuery自定义动画:.animate({“left”:”600px”,””:””},1000)

       自定义动画 :    animate(obj, speed, [easing], [callback])

    easing参数:控制动画的执行速度

            swing:摇摆(秋千)(默认)(先慢,再快,后慢)

            linear:匀速效果

    360开机动画:animate(obj,speed,function(){})

     动画队列:每一个元素都有动画动画队列

    5停止动画

             stop():停止当前动画

             clearQueue:是否清除动画队列(true/false

             jumpToEnd:是否跳转到当前动画最终效果(true/false

    6添加节点

            append:添加到子级的最后面

            prepend:添加到子级的最前面

            after:添加到调用者的后面,作为兄弟元素

            before:添加到调用者的前面,作为兄弟元素

    城市选择案例: var $option = $("#src-city>option:selected");

                    $("#tar-city").append($option);

    Html方法:$("div").html("<h1>我是标题</h1>");//设置内容

       console.log($("div").html());//什么都不传,就是获取

    7、表格生成案例:,用对象数组获取数据。再通过字符串的拼接,最后.html(str);

      html():  html(htmlStr) :设置内容  

                  html():获取内容

        清空元素(清理门户):empty()推荐

                             html("")

           删除元素(自杀):remove()

     8、克隆元素:

    var $p = $("p").clone();
    $p.html("我改变了内容");
    $("div").append($p);

           clone() :深度复制  放在事件上面则可以触发事件

    放在事件下面不可以触发事件,要触发必须加 clone(true)

            clone(true):事件也会复制上

    9属性操作(jquery操作DOM:属性操作用attr()方法      用法跟css方法一样

        设置单个属性:attr(name, value)

        设置多个属性:attr(obj)

        获取属性:attr(“name”) :注意:

    移除属性:removeAttr(name):移除属性

    三、操作部分2与事件部分

    1、prop“ ”,true/false)方法disabled/selected/checked 布尔类型的值用prop放法

    2、表格全选案例:1获取头prop“checked")是否选中,设置身的是否选中

        2通过比较 allLength checkedLength$("#j_tb input:checked").length)        是否相等,来设置头是否选中

    3、操作value值: val(value):设置值          (文本框text)

              val():获取值

    4操作内容html(value):设置内容,能识别html标签

             html():获取内荣,能获取到标签

             text(value):设置内容,会转义html标签(带标签)

              text():获取内容,丢弃html标签

    5操作宽度和高度number):width(value):设置宽度 .css("height")):获取的会有单位px

               width():获取宽度

               height(value):设置高度

               height():获取高度

    6操作位置

              offset():相对文档

                offset({top:20,left:0}):设置位置,注意如果没有定位,会加上position:relative

                offset():获取{top:20,left:0}    css{“”:”” ,””:””})相对有定位的设置:子绝父相

             position():相对有定位的父元素

                只能获取,不能设置

    7操作滚动$(window).scroll(function () {};

            scrollTop(value):设置

            scrollTop():获取卷去的垂直距离              number

            scrollLeft(value):设置卷去的水平距离

            scrollLeft():获取卷去的水平距离

     8on方式注册事件(★★★★★)

            给自己绑定事件:$("div").on("click", function(){})

            注册代理事件:$("div").on("click", "p", function(){}) (添加的标签也可以有事件)

          如果一个元素上有多个事件,首先会处理委托事件,然后处理本身的事件

    9解绑事件

            off():解绑所有的事件,包括代理事件

            off("click"):解绑指定的事件

            off("click", "**");解绑代理事件

    10触发

            click():会

            trigger("click"):

            triggerHandler("click"):不会触发默认行为

    11、按键变色案例:$(document).keydown事件 然后 var keyCode = e.keyCode; 然后通过.css()               设置背景色

    12事件对象

            Event.data           data参数不能传字符串,应该传对象  

    $("div").on("click", {"name":"zs", age:18}, function (e) {
    
                     alert("哈哈,我有" + e.data.name);  })
    
    });

            event.keyCode

            event.stopPropagation()  阻止事件冒泡

            event.preventDefault()   阻止浏览器默认行为

    return false:既能阻止事件冒泡,还能阻止浏览器的默认行为。

    13、五角评分案例:①li注册mouseenter事件:当前元素实心,前面为实心、后面为空心

                      ②ul注册mouseleave事件:所有li为空心

       找到添加active类的li,设置实心,前面也为实心

      ③li注册click事件:当前li添加active类,其它兄弟元素移除该类

    14、显示迭代:

            for()手动迭代

            each(function(index,element){})

    15、 多库共存:

            $.noConflict()

    四、链式编程

    1、链式编程:1. 只有设置性的操作才能链式下去。(return this

                 2. 获取性操作不能链式下去(因为要返回具体指) width() number     css("backgroundColr") string

                 3. 使用筛选选择器的时候要慎用,会修改jquery对象里面的DOM对象。

                 如何解决:

                          重新写

                          end()

    2、jQuery.Color插件的使用:颜色渐变

    3、jQuery.lazyload插件的使用:页面,滑到才加载图片等出来

    4、如何制作插件:

    $.fn.changeGreen=function(){this.css("backgroundColor", "green");}

    5jquery-ui.js的使用:新闻模块

  • 相关阅读:
    JS判断数组中是否有重复元素的方法
    根据类名找到元素
    JS获取页面元素并修改
    JS实现会动的小车
    动态规划------最长公共子串(连续)
    动态规划------最长递增子序列
    买卖股票的最佳时期
    操作系统清华大学版笔记(十一)死锁、银行家算法和进程间通信(直接通信、间接通信)
    128 最长连续序列
    链表------删除有序单链表中重复的节点
  • 原文地址:https://www.cnblogs.com/wuhui070470/p/5788900.html
Copyright © 2020-2023  润新知