• jquery概要--基础02


    复制节点:clone();默认不会复制绑定事件,如果传入参数true会复制;
    替换节点:

    • replaceWith()              //原节点放在前,新节点放在在后;
    • replaceAll()                 //反之;

    原本绑定的事件和附加的数据也会消失;
    包裹节点:

    • wrap(),wrapAll();       //如果被包裹的节点间还有其他元素,其他元素会被放到包裹元素之后;

    包括选中节点的子孙节点:

    • wrapInner();            //原节点放在前,新节点放在在后;

    样式操作:

    • 直接使用属性操作;
    • 使用addClass,removeClass//参数中多个class用空格分开;
    • 切换样式:toggleClass() //设置其他操作来引发;
    • 判断样式:hasClass('another')等价于is('.another') //必须要有参数否则返回false;

    获取/设置一些值

    • html(); //相当于innerHTML
    • text(); //获取的话是包括子孙节点在内的所有文本节点;设置的话会覆盖掉设置元素节点的所有子孙节点
    • val(); 获取/设置value属性值

    CSS-DOM操作

    • css('')     //获取; css('','')   //单个设置;css({'':'','':''})   //多个设置
    • height()/width();  //获取; height(100)/width(100)  //设置,默认单位为px;

    元素定位:

    • offset();                              //获取当前视窗的相对偏移,其中返回的对象包含两个属性:left,top;
    • position();                           //获取相对偏移,其中返回的对象包含两个属性:left,top;
    • scrollTop(),scrollLeft();          //获取/设置元素滚动条距离顶端/左侧的距离;

    执行时机:如图片操作

    • window.onlod方法需要等到所有图片都加载完毕之后;
    • $(document).ready()只要DOM就绪就可以操作;

    当$()不带参数的时候,默认参数就是document;
    事件绑定:bind();

    •  第一参数为事件类型blur,focus,load,unload,ckick,dbclick,mousedowm,mouseup,mouseover,mouseout,keydown,keypress,

    submit,change,error,sekect等;

    • 第二参数可选,作为event.data属性值传递给事件对象的额外数据对象;
    • 第三参数为绑定的处理函数;

    合成事件:

    • hover(enter,leave):模拟光标悬停事件;           //先执行mouseover,再执行mouseout;
    • toggle(fn1,fn2....):模拟鼠标连续点击事件;    //jquery1.9.0以后已经删除
    • toggle();                                                 //自动改变show()或hide();
    • toggleClass();                                         //自动增删当前class中的某个值;

    事件

    • 停止事件冒泡: event.stopPropagation()        /return false;            //在当前执行函数执行之后事件就停止传递上去。
    • 阻止默认行为:event.preventDefault()          /return false;

    JQ事件对象

    • 属性:type:事件类型;target:触发事件的元素;pageX/pageY:光标相对页面位置;
    • 方法:stopPropagation(),preventDefault();

    unbind()//解除绑定事件,第一参数可选为事件类型,第二参数可选为执行函数;
    one(type,function) //结构与bind()相同,绑定的事件执行函数只执行依次;
    模拟操作:

    • 简化写法:如直接使用click(),focus();
    • 使用trigger();

    允许参数:trigger(type,[data]) //第一个参数可以是自定义的事件类型;第二个参数将数据传入执行函数,注意执行函数第一个参数是event;
    执行事件函数但阻止默认事件:triggerHandler();
    bind的高级操作:

    • 一次性绑定多个事件类型,如配合toggleClass 。 bind('mouseover mouseout',function(){});
    • 添加事件命名空间,便于管理。bind('click.plugin',function(){});unbind('.plugin');

    动画效果

    • 当给shoe(),hide()添加参数的时候,就有了渐变的动画效果;包括内容的高度,宽度,透明度的变化

    参数:200 === 'fase'; 400 === 'normal'; 600 === 'slow';其他数字(毫秒);

    • 可以用toggle()简化show()和hide()方法;
    • 如果只想有改变透明度的效果,使用fadeIn,fadeOut,参数同上;
    • 可以用fadeToggle()简化fafrIn和fadeOut方法,参数同上;
    • 如果只想有改变高度的效果,使用slideUp,slideDown,参数同上;
    • 可以用slideToggle()简化slideUp和slideDowm,参数同上;
  • 相关阅读:
    Windows下 如何添加开机启动项
    Android在 普通类(非Activity,多数为Adapter) 中 传输数据为空值 解决方法 :在startActivity 用 intent传输数据
    Android 从ImageView中获取Bitmap对象方法
    剑指offer(纪念版)读书笔记【实时更新】
    剑指offer(纪念版) 面试题3:二维数组中的查找
    C++ sizeof 误区 大公司面试题
    51 nod 1521 一维战舰 时间复杂度O(n),同 Codeforces 567D. One-Dimensional Battle Ships 有详细注释
    51nod 1126 求递推序列的第N项 思路:递推模拟,求循环节。详细注释
    51nod 1451 合法三角形 判斜率去重,时间复杂度O(n^2)
    关于JetBrains CLion 激活 (CLion License Activation)的解决办法,带hosts详细修改
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4132164.html
Copyright © 2020-2023  润新知