JQuery的一些知识点

jquery $(document).ready() 与window.onload的区别


  • 执行时间

    • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
  • 编写个数不同

    • window.onload不能同时编写多个,如果有多个window.onload方法,只会执行后面一个
    • $(document).ready()可以同时编写多个,并且都可以得到执行
  • 简化写法

    • window.onload没有简化写法
    • $(document).ready(function(){})可以简写成$(function(){});

原生JS的forEach和jquery的each的区别


  • 原生forEach方法只能遍历数组,不能遍历伪数组
arr.forEach(function (index,value) {
        console.log(index.value);
 })
  • jqueryeach方法可以遍历伪数组
$.each(arr1,function (index1,value1) {
        console.log(index1,value1);
 })

$.trim();

  • 作用:去掉字符串首位的空格
  • 参数:带有空格的字符串
  • 返回值:去掉空格后的字符串

$.isWindow();

  • 作用:判断传入的对象是不是window对象
  • 返回值:true/false

$.isArray();

  • 作用:判断传入的对象是不是真数组
  • 返回值:true/false

$.isFunction();

  • 作用:判断传入的对象是不是函数
  • 返回值:true/false

jquery-holdReady方法


$.holdReady();

  • 暂停ready事件
  • 参数:true暂停/false开启

js操作属性节点

  • 设置属性setAttribute()
  • 获取属性getAttribute()

jquery的attr方法


attr

  • 作用:获取或者设置属性节点的值
  • 如果传递一个参数就是获取属性节点的值,如果传递两个参数就是设置属性节点
    removeAttr
  • 作用:删除所传入的属性节点

jquery操作属性的方法


prop 不仅能够操作属性,也能操作属性节点
removeProp

  • 官方推荐在操作属性节点时,具有true和false两个属性的属性节点,如checked,selected或者disabled,使用prop(),其他的使用attr();

获取滚动偏移位

console.log($('.scroll').scrollTop());

取网页滚动偏移位

为了保证浏览器兼容,需要使用  
$('body').scrollTop()+$('html').scrollTop()

jquery事件绑定

$('button').click(function () {
     alert('第一种')
 });
$('button').on('click',function () {
     alert('第2种')
 })

取消绑定事件

off();方法

  • 1.不传参,取消所有的绑定事件
  • 2.传一个,(参数是事件的名称)

什么是事件冒泡

  • 事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
  • 阻止事件冒泡方法1
    return false;
    方法2
    event.stopPropagation();
    例子:
 $('.son').click(function (event) {
            alert('son');
            //阻止事件冒泡方法1
            // return false;
            //方法2
            event.stopPropagation();
        });

什么是默认行为

比如a标签,点击之后默认会跳转

如何阻止默认行为

  • 方法1 return false;
  • 方法2 event.preventDefault();
    例子:
 $('a').click(function (event) {
            alert('点击了a');
            //如何阻止默认行为
            //方法1
            return false;
            //方法2
            // event.preventDefault();
        })

自动触发事件方法1

trigger();
$('.father').trigger('click')

自动触发事件方法2

$('.father').triggerHandler('click');

trigger和triggerHandler的区别

  • 1.triggerHandler可以阻止事件冒泡,trigger不可以
  • 2.trigger会自动触发默认事件,triggerHandler不会

想要自定义事件,必须要满足两个条件

  • 1.事件必须通过on来绑定
  • 2.事件必须通过trigger来触发
$('.son').on('myClick',function () {
    alert('son')
});

事件委托 delegate()

事件委托就是,可以找一个在入口函数之前就存在的元素来监听动态添加的元素的事件

  • mouseover/mouseout子元素移入和移出也会被触发父元素事件
  • mouseenter/mouseleave不会(推荐使用)

内部插入元素

append()
将新增元素添加到指定元素内部的最后
prepend()
将新增元素添加到指定元素内部的最前

外部插入元素

``after()将新增元素添加到指定元素外部的后面after()`
将新增元素添加到指定元素外部的前面

删除节点

remove()删除指定元素
empty()删除指定元素的内容和子元素,指定元素本身不会被删除

复制节点

clone()的值为false时,可以复制节点,但是不能复制节点的事件,clone()的值为true时,可以复制节点也可以复制节点的事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。