jQuery个人总结

于 2019-09-20 14:15:27 发布
阅读量697 收藏 11
点赞数 2
文章标签： jquery个人总结 jquery 个人笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongliming_qd/article/details/101059158
版权

jQuery笔记

基础补充

入口函数

1.原生和jQuery入口函数的区别

// 1.原生
window.onload = function(){}

// 2. jQuery 对象
$(document).ready(function(){})

原生与jQuery的区别 :
1.原生会等待DOM元素全部加载完成(包括图片)后执行里边的代码,
  Jquery会等到Dom元素加载完成,但是不会等到图片也加载完成

2.元素的入口函数只能有一个 
  jQuery入口函数可以有多个,顺序是从上到下执行
  1. jQuery入口函数的四种写法
    • 用法一样, 没区别
// 1 
$(document).ready(function(){})
// 2
jQuery(document).ready(function(){})
// 3
$(function(){})
// 4
jQuery(function(){})

3.入口函数的冲突问题

var nj = jQuery.noConflict();
        nj(function () {
            alert("hello lnj");
        });

$()小型总结

  • 接收一个函数,作为入口函数
  • 接收一串字符串
    • 选择器 $(’.box’)
    • Dom对象转成jQuery对象 $(document) (jQuery转成原生的用 get())
    • 接收字符串代码片段 $(‘

      你好,我是新创建的元素

      ’) ==>(类似于 document.creatElement)

常用的jQuery方法

DOM原生对象不能使用Jquery对象的方法,Jquery对象不能使用DOM原生对象的方法

  • jQuery转成原生的用 1. get() 2. 直接[]下标
  • 原生转jQuery : $(原生)
  1. each

  • each 和 元素数组forEach的区别

    1. 通过jQuery获取的的元素为伪元素,伪元素默认为对象,不能使用forEach方法,所以可以用到Jquery的each方法
    var arr = [1,2,3,4]
// 1. 都能遍历数组
arr.forEach(function(ele,index){})   // ele在后,index在前
$.each(arr,function(index,ele){})    // index在前,ele在后
// 2. forEach不能遍历伪元素   querySelectorAll获取到的例外
// jQuery对象没有forEach方法,所以不能使用forEach,
  1. map
    • 用法和元素map一样,return有返回值
    • $.map(arr,function(ele,index))
  2. trim
    • var newArr = $.trim(arr)
  3. isArray
    • var trueOrFalse = $.isArray()
  4. isFunction
    • var trueOrFalse = $.isFunction()
  5. isWindow
    • var trueOrFalse = $.isWindow()

选择器

DOM操作

样式操作

attr 行内样式操作 attribute
// 1.获取
$('div').attr('class')

// 2.设置
   // 单个
$('div').attr('class','glmbox')
   // 多个
$('div').attr({class : 'glmbox',index : 10})
removeAttr 删除行内样式 removeAttribute

  • 删除 行内样式

    $(‘div’).removeAttr(‘class’)

prop
  • 获取或设置jQuery对象的属性或者方法
  • 但是通常用于获取和设置checked / selected / disable
  • 通常用于表单操作
removeProp
css()
// 1.获取样式
var a = $('.box').css('width')

// 2. 设置样式
	// 2.1 
	$('.box').css('width','100px')
	$('.box').css({width:'100px',zIndex : 1})

文本操作

html === innerHTML
  • 用法和innerHTML一样
text() === innerText

$(’.box’).text()

val === value
  • $(’.box’).val()

class操作

  • 可以同时操作多个
addClass
removeClass
toggleClass
hasClass

获取元素

chidlren 获取子元素 children
  • $(’.box’).children(‘span’) ==> 获取.box中的span子元素
  • $(’.box’).children() ==> 获取.box中的全部子元素
find 获取后代元素
  • $(’.box’).find(’.son’) ==> 获取.box中的类是son的所有后代元素
parent 获取父元素 parentNode
  • $(’.box’).parent()
parents 获取祖宗元素 parentNode.parentNode
  • $(’.box’).parents(’.father’) ==> 获取祖宗是.father的元素
prev 获取上一兄弟元素 prevElementSiblings

$(’.box’).prev()

next 获取下一元素 nextElementSiblings

$(’.box’).next()

siblings 获取其它所有的兄弟元素

$(’.box’).siblings()

增加元素

var $(‘

你好

’)
append
  • 父元素.append(子元素)
  • 添加到父元素的最后面
prepend
  • 父元素.prepend(子元素)
  • 添加到父元素里边的第一个
after
before

删除元素

remove
  • 删除全部
empty
  • 删除内容和子元素,自己本身不会删除

获取各种宽高

width height
  • 获取/设置的是内容高度,不包括边框和内边距类似于 : scrollHeight / scrollTop
  • 获取当前的可视区域的宽高 : $(window).width()
outerWidth outerHeight
  • 类似于原生 : offsetWidth/offsetHeight == padding + bording + width的宽度
  • 获取的一样是数字类型
  • 比 offsetWidth/offsetHeight强大,可以做修改 : $(’.box’).outerWidth(200)
  • outerWidth(true) / outerHeight(true) 获取的是 margin + padding + bording + width的宽度
innerWidth / innerHeight
  • 获取的是padding + width的宽度
offset()
  • 注意 : 并不是offsetLeft和offsetTop的封装
  • 类似于pageX 和 pageY
  • 可以修改
// 获取距离窗口的偏移位   ==>  获取盒子距离浏览器窗口顶部的距离
$('.box').offset().left   ==>  获取盒子距离浏览器顶部的距离
$('.box').offset().left    ==>  获取盒子距离浏览器窗口最左边的距离
position
  • 类似于原生 offsetLLeft / offsetTop
  • 注意 : 只能获取不能设置 var a = $(’.box’).position().top ==> 返回的是对象
  • 设置的话直接用css
scrollTop

  • 获取当前浏览器的滚动宽度

    $(‘body,html’).scrollTop()

    一般用 $(window).width()

  • 设置当前浏览器的滚动高度

    $(‘body,html’).scrollTop(300) // 不能用 ‘300px’

事件

事件对象

  • 用法和原生一模一样,唯一的区别就是不需要再处理兼容性(任何兼容性)
  • e.target / e.pageX / e.screenX / e.clientX / e.keyCode

事件绑定

  1. 元素.on(‘事件名称’,function(){ 执行函数 })
  2. 元素.click(function(){ 执行函数 })

移除事件

元素.off(‘事件名’,函数名字) // 函数名字可有可无

阻止事件冒泡

  • event.stopPropagation()
  • return false (同时阻止了a标签事件默认行为)

阻止默认事件 (a标签的跳转)

  • event.preventDefault()
  • return false (同时阻止了事件冒泡)

自动触发

$(’.box’).trigger(‘click’)

事件委托

$(’.box’).delegate(’.box:eq(1)’,‘click’,function(){})

  • $(this)指的是当前点击的元素 === e.target ?
  • 用于新创建的元素事件操作

事件绑定

  • bind
  • delegate
  • on
bind
  • 不常用,只能用于对同个元素同时注册多个事件,不同用事件委托
delegate
  • 事件委托
  • 只能处理事件委托
$('.father').delegate('.son','click',function(){})
on
  • 能对同一个元素同时注册多个事件,同时事件委托
  • 注意点 : 和delegate的事件和选择器的位置不一样
$('.father').on('click','.son',function(){})
  • data
$('.father').on('click','.son','我是data数据,通过事件对象:edata可以访问到我',function(e){
    console.log(e.data)
})

change()

  • 用于值改变 :

    ​ 1. 常用于表单操作(file select控制option中的value值,select必须要有name属性)

click()

dbclick()

mouseenter

  • 不支持冒泡

mouseleave

  • 不支持冒泡

mouseover

  • 支持冒泡

mouseout

  • 支持冒泡

show

$(’.box’).show(1000,function(){})

  • 时间参数 : ‘fast’ == 200 ‘slow’ == 600 ‘normal’ == 400

hide

$(’.box’).hide(1000,function(){})

slideDown

slideUp

fadeIn

$(’.box’).fadeIn(1000,function(){})

fadeOut

fadeToggle

动画

animate

$(’.box’).animate({width:‘100px’,height : ‘+=100’},1000,linear,function(){})

  • 第一个参数 : 改变的样式
  • 第二个参数 : 时间
  • 第三个参数 : 匀速还是变速
  • 第四个参数 : 完成之后执行啥

delay

$(’.box’).animate({width:‘100px’},1000).delay(1000)

stop

stop(参数一,参数二)

作用 : 参数一 : true :清除所有队列

​ 参数二 : true: 直接到达当前执行动画地点

  • 进入下一个队列动画,并停止当前动画

    $(“div”).stop(false, false);

  • 清除所有队列动画,并停止当前动画

    $(“div”).stop(true, false);

  • 进入下一队列动画,并直接到达当前动画的终点

    $(“div”).stop(false, true);

  • 清除所有队列动画,并直接到达当前动画的终点

    $(“div”).stop(true, true);

注意点 :

  • 顶部导航加载动画(slideDown 或者 slideUp 的效果)
    1. slideDown对 $(“div”).stop(false, false); / $(“div”).stop(true, false);中的 后边的false是不管用的
    2. 或者不用slide方法, 直接控制animate的高度,并设置overflow为hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 300px;
            height: 50px;
            background:red;
            margin: 0 auto;
            padding-top: 50px;
        }
        .box2{
            width: 600px;
            height: 600px;
            background: purple;
            margin: 0 auto;
            /* overflow: hidden; */
            display: none;
            
        } 
    </style>
</head>
<body>
    <div class="box"> 
            <div class="box2">
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
                <p>1111111111</p>
            </div>
    </div>
   
    <script src="../js/jQuery/jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            $('.box').mouseenter(function(){
                // $('.box2').stop(true,false).animate({height:600});
                $('.box2').stop(true,true).slideDown();
            })
            $('.box').mouseleave(function(){
                // $('.box2').stop(true,false).animate({height:0});
                $('.box2').stop(true,false).slideUp()
            })
        })
    </script>
</body>
</html>
  • 轮播图

原生jQuery的学习

补充知识点

  1. 伪数组转化成真数组 :

    var obj = {0:1,1:2,2:'你好',length:3}
var arr = []
arr = [].slice.apply(obj)    // [1,2,'你好']
arr = [].slice.call(obj)     // [1,2,'你好']

  2. 真数组转化成伪数组

    var arr = [1,23,3,5];
    var obj = {};
    arr.forEach(function(ele, index){
           obj[index] = ele;
     })
    obj.length = arr.length;
   
     console.log(obj);       //  {0: 1, 1: 23, 2: 3, 3: 5, length: 4}

jQuery 的模型架构

  • underfine的作用 : 为了方便后期的压缩
(function(window,underfine){
    // 定义jQuery构造函数,也是入口函数
    function jQuery(selected){
        // 返回jQuery的原型上的init方法(构造函数)的实例对象
        return new jQuery.fn.init(selected)
    }
    jQuery.fn = jQuery.prototype = {
        constructor : jQuery,
        init : function(selected){
            
        }
    }
    // 让所有的属性和方法添加到jQuery属性上和原型上
    jQuery.extend = jQuery.prototype.extend = function(MethodAndAttribute){
        for(var key in  MethodAndAttribute){
            this[key] = MethodAndAttribute[key];
        }        
    }
    jQuery.fn.init.prototype = jQuery.prototype;
    window.jQuery = window.$ = jQuery
})(window,underfine)

jQuery构造函数添加方法(基本判断类型等)

jQuery.extend({
     // 判断是否是函数
    isFunction : funtion(sele){
    return typeof sele == 'function';
},
    // 判断是否是字符串
    isString : function(sele){
    return typeof sele == 'string';
},
     // 判断是否是数组
    isArray : function(sele){
    return Object.prototype.toString.call(sele) == "[object Array]" ;   
    },
    // 判断是否是HTML
    isHTML : function(sele){
	if(sele.charAt(0) && sele.charAt(sele.length - 1) && sele.length > 3){
        return true;
    },
    // 判断是否是window
     isWindow : function(sele){
        return   sele == window;;
     },
    // 去除字符串两端的空格    
     trim  : function(sele){
         if(jQuery.isString(sele)){
             return sele.trim()
         }    
     },
    // 判断是否是对象
     idObject : function(sele){
        return typeof sele == 'object';  
     },
    // 监听DOM的加载
     ready : function(fn){
         // 判断DOM是否加载完毕
         if(document.readyState == "complete"){
                fn();
            }else if(document.addEventListener){
                document.addEventListener("DOMContentLoaded", function () {
                    fn();
                });
            }else{
                // 兼容IE8
                document.attachEvent("onreadystatechange", function () {
                    if(document.readyState == "complete"){
                       fn();
                    }
                });
            }
     },
    
     
})

入口函数的传值

  1. 传入 ‘’ null undefined NaN 0 false, 返回空的jQuery对象
init : function(selected){
    if(!selected){
        return this;
    } 
  }
  1. 传入的为函数,监听DOM加载
  • 原生 : window.onload会等到DOM元素全部加载完毕,且图片也加载完成,且window.onload只能调用一次
  • jQuery : 只会等到DOM元素加载完毕,不会等到图片也加载完成才执行,且能调用多次
// IE8以上可用  :    IE8以下不支持addEventListener

init : function(fn){
    if($.isFunction(fn)){
         // 判断DOM是否加载完毕
            if(document.readyState == "complete"){
                fn();
            }else if(document.addEventListener){
                document.addEventListener("DOMContentLoaded", function () {
                    fn();
                });
            }else{
                document.attachEvent("onreadystatechange", function () {
                    if(document.readyState == "complete"){
                       fn();
                    }
                });
            }
    } 
  }
  1. 传入为字符串
init : function(selected){
    if(jQuery.toString(selected)){
       // 0. 将两端的空格去掉
       selected =  jQuery.trim(selected);
       
       // 1.  判断是否HTML字符串
        if(jQuery.isHTML(selected)){
            // 1.1 创建一个div标签
          var newdiv = document.creatElement('div');
            // 1.2 这个div的innerHTML赋值为selected
           newdiv.innerHTML = selected;
           	// 1.3.1 给当前的实例对象添加属性,值为当前创建的所有元素(不建议使用,代码太多)
            for( var i = 0; i < newdiv.children.length; i++){
                this[i] =  newdiv.children[i]
            }
            // 1.3.2 给当前的实例对象添加属性,值为当前创建的所有元素(建议使用)
            [].push.apply(this,newdiv.children)
            // 1.4 返回这个实例对象
            return this
        }
   	    // 2. 判断是否是选择器
        else {
            var res =  querySelectorAll(selected);
            [].push.apply(this,res);
            return this;
        }
    }
    
  }

后面的不看了,再看就要掉头发了!!!

来陪人家玩游戏嘛
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JQuery个人总结（很全面）
08-19
目录： 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作：取值和赋值 5.元素的操作：移动 6.元素的操作：复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
2024年最新jQuery 基础知识总结（超级详细），超通俗解析
最新发布
2401_84617533的博客
05-07 881
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
jquery个人总结
qq_29030071的博客
02-27 213
注释：ele：元素名，className,id.  各种选择器        element具体的元素标签：例如 , 表单元素：select,input        .val(value)         参数value 的值可以是String,Array,function .css()     .css(propertyName)   //返回该css样式的值。
Jquery 数组操作大全个人总结
10-26
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多，最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档顺便对jQuery数组做个总结
自己动手手写jQuery插件总结
10-24
主要介绍了自己动手手写jQuery插件总结,本文是个人学习jQuery插件的总结,实现了一个小功能的jQuery插件,需要的朋友可以参考下
JQuery学习总结
weixin_33881753的博客
11-25 97
JQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便HTML元素，拥有很好的可扩展性，拥有不少插件。JQuery可以快速找到文档中的html元素，并对其进行操作，如隐藏、显示、改变样式、添加内容等。能够方便的在页面上添加和移除html元素。这些功能虽然使用JavaScript也能实现，但是JQuery绝对使这些工作变得更加简单。【HTML负责页面内容、...
个人jQuery的使用总结
weixin_33676492的博客
04-08 102
一、使用方法 参考内容有： http://www.w3school.com.cn/jquery/jquery_ref_events.asp http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html 导入jQuery 例子： <SCRIPT SRC="../../js/jquery/jque...
Jquery学习总结
01-08
这是本人通过一段时间的学习后得的总结，让初学者少走弯路
JQuery个人学习总结
天才中年英俊的博客
08-15 475
一。JQuery访问DOM节点 1.JQ对象：框架对JS中的DOM对象进行封装后的对象，让其获取方式更加简单、直观。 使用$()方法就可以直接返回JQ对象，其实质为一个字符串。 var $p = $('#imooc'); 通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己...
Jquery自我总结
︶ㄣ:小坏蛋
05-06 511
jquery顶级对象 缩写$ 1、$(document).ready(function(){ }) 缩写 $(function(){ }) dom加载完成后触发 window.onload 只能注册一个方法 页面所有内容加载完成后触发（图片，css，js都加载） 2、jQuery对象(包装集) dom对象 var div = document.getElementByI
jquery的学习个人总结
qq_33061481的博客
05-23 3609
前沿：在接触jquery前，由于受公司几个同事的言论影响感觉jquery非常差，远远比不上原生的js，由此放弃了对jquery的深究。但后面接二连三的项目中用到的前端技术都是基于jquery，这使不懂jquery的我陷入了很大烦恼中。这不得不使我去耐下性子去好好研究下jquery，jquery的学习和运用都是属于比较简单的这里为大家推荐一个jquery的学习网站：http://www.runoob...
jQuery的个人总结
林的博客
08-31 993
jQuery的个人总结 了解什么是jQuery 了解jQuery优点 hello jQuery jQuery三种工厂方法 jQuery属性写法 jQuery事件写法 jQuery方法写法 console.log() 7.事件处理程序 ======================================================= 1.想要使用jQuery，我们要先引...
jquery总结
石顺麟
07-12 1437
04-jquery jquery版本 //1.xxx 支持IE6 7 8 //2.2.XXX 不支持IE6 7 8 //3.xxx 不支持IE6 7 8 $ //jQuery === $,就是一个函数，可以获取元素，创建元素 使用jquery的步骤 /*引入jquery文件*/ /*入口函数*/ $(function(){...}) jQuery(fun...
自我jQuery学习精华总结
08-19 341
因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。     在说jQuery之前，不得不提下现在也非常流行的mootools框
Jquery常用的方法总结
weixin_33798152的博客
08-20 86
1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对...
Validate和Bootstrap1
08-04
Validate是jquery的一个插件，依赖于jquery的使用，是jQuery插件中历史最悠久的之一。 jQuery是一个广泛使用的JavaScript库，可以简化HTML文档横向和纵向方向的跨浏览器兼容性。学习jQuery的目的是为了方便开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值