• JQuery操作方法


    JQuery操作方法

    位置操作:
    offser()方法:获取相对于整个document的位置,按照左上角来看
    $('查找对象').offset():获取从左上角来说的位置对应值
    $('查找对象').offset({left:200,top:200}):设置位置
    position方法:


    scrollTop()方法:获取滚轮相对整个屏幕来说移动了多少值
    $(window).scrollTop():获取滚轮移动的值
    $(window).scrollTop(0):将滚轮移动到0的位置
    scrollLeft():查看滚轮向右移动了多少值
    尺寸操作:
    $('查找对象').height():获取盒子模型里content的高度,也是我们设置的标签的高度
    $('查找对象').width():获取盒子模型里content的宽度,也是我们设置的标签的宽度
    $('查找对象').innerHeight():获取盒子模型里内容content的高度加上两个pandding的高度
    $('查找对象').innerWidth():获取盒子模型里内容content的宽度+两个pandding的宽度
    $'查找对象').outHeight():获取盒子模型里内容content的高度加上两个pandding高度加上两个border高度
    $('查找对象').outWidth():获取盒子模型里内容content的宽度加上两个pandding宽度加上两个border宽度
    文本操作
    $('查找对象').html():获取第一个匹配元素的html内容,包括标签内容,获取标签和文本
    $('查找对象').text():取得所有匹配元素的内容,只有文本内容,没有标签
    $('查找对象').html(属性值):将识别出来的对象加上html内容,html是可以识别标签的,可以将标签添加到上面去
    $('查找对象').text(属性值):将识别出来的对象加上text内容,text不可以识别标签的,只能将写的标签作为文本添加上去

     

    值操作
    $('查找对象').val():取得第一个匹配元素的当前值
    $('查找对象').val(属性值):设置所有匹配元素的值
    $('查找对象').val([属性值1,属性值2]):可以设置多选的checkbox,多选的select的值
    $('选中对象:checked').val():会将多选标签中选中的内容显示,如果想看多个值需要进行循环
    $('查找对象').attr('checked','checked'):将匹配的选择标签进行选中操作
    属性操作
    $('查找对象').attr('age',18):给匹配到的元素增加age属性并赋值$('查找对象').attr({'age':'18','name':'chao'}):可以匹配的元素设置多个属性
    $('查找对象').attr('age'):查看匹配到的元素的属性对应的值
    $('查找对象').removeAttr('age')删除匹配到的元素的属性对应的值
    $('查找对象').prop("checked"):针对单选和多选可以识别选中,未选中状态,返回的是true和false
    想设置选中的input标签对象$('查找对象').prop('checked',true)
    取消选中:$('查找对象').prop('checked',false)
    prop和attr的区别:

    attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

    attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false

    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。

    具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
    文档处理
    $('div').append(a) 将a添加到div内部的后面
    $(a).appendTo('div') 将a添加到div内部的后面

    $('div').prepend(a) 将a添加到div内部的前面
    $(a).prependTo('div') 将a添加到div内部的前面

    $(A).after(B) 把B放到A外部的后面
    $(A).insertAfter(B) 把A放到B外部的后面

    $(A).before(B) 把B放到A的外部的前面
    $(A).insertBefore(B) 把A放到B外部的前面

    $('查找对象').remove():删除标签,从DOM中删除所有的匹配元素
    $('查找对象').empty():清空标签,删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还在

    这两个都是将p标签替换掉
    $('p').replaceWith(aele)
    $(aele).replaceAll('p')

    克隆:
    $('查找对象').clone()客隆标签但不克隆标签带的事件
    $('查找对象').clone(true):克隆标签并且克隆标签带的事件
    事件绑定

    绑定事件的两种方式:
    1.标签对象.click(function(){})
    2.标签对象.on('click',function(){})
    input事件只能用on绑定
    input事件会实时根据input输入的值产生变化示例,如百度搜索
     
    常用事件:
    click:点击就触发
    hover
    对象.hover(
    1.鼠标进入
    function(){},
    2.鼠标移出
    function(){}
    )

    blur:点击之外的就触发事件
    focus:点击触发事件   两者绑定使用

    change:内容发生变化,常用于input,select等

    mouseenter
    mouseover
    mouseover 和 mouseenter的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象

    keyup,keydown
    $(window).keyup(function(e){
    e.keyCode; e为事件对象,keyCode是获取用户按下了哪个键,数字表示
    })

     

  • 相关阅读:
    JQuery基础知识--方便忘记时查看
    关于jquery.validate.js的用法
    JQuery ajax提交表单及表单验证
    thinkphp rabc权限总结
    关于jquery ajax项目总结
    中国剩余定理及其拓展 CRT&EXGCD
    bzoj 4899 记忆的轮廓 题解(概率dp+决策单调性优化)
    bzoj3307 雨天的尾巴题解及改题过程(线段树合并+lca+树上差分)
    20190614考试心态爆炸记
    fhq Treap(无旋Treap)
  • 原文地址:https://www.cnblogs.com/sikuaiqian/p/10842360.html
Copyright © 2020-2023  润新知