• 锋利的jQuery笔记


    1.jquery 选择器:

    1.  :not()不含有

    2.  :gt(num)选择第num+1之后的所有元素

    3. fiter(exper)  筛选出指定表达式匹配元素的集合 对自身元素进行筛选

    4. find() 筛选出自身子集操作

    5. :contains('str')  包含指定字符串str的

    6. div:visible  选取所有可见得的DIV元素

    7.div:hiden  和上面相反

    8 :enable 选取所有可用元素

    9 :disabled 选取所有不可用元素

    10 :checked 被选中的元素(单选框,复选框)

    11  :selected 选取所有被选中的选项元素(下拉列表)

    12 li:eq(2)获取li中第三个li节点

    2jquery中的DOM操作

    1. text()设置该匹配元素的文本内容

    2. var $li_1=$("<li></li>")

    $("ul").append(&li_1);添加到UL节点中是只能在网页中显示

    3. append() 在每个匹配元素内部追加内容

    4. prepend() 向每个匹配的元素内部前置内容

    5. after() 向每个匹配的元素之后插入内容、

    6. befor() 向每个匹配的元素之前插入内容

    7删除节点有三个方法:

    1. remove()删除所匹配的元素

    2. detach()删除 但是会保留绑定的事件和附加的数据

    3. empty()清空元素中所有后代节点

    8 复制节点:$(this).clone().appendTo("ul");复制当前节点并将它追加到,<ul>元素中

    9 替换节点 replaceWith()  replaceAll()与replaceWith()用法相同只是颠倒了一下操作

    $("p").replaceWith("<a>ddd<a/>")

    $("<a>ddd</a>").replaceAll("p")

    10 包裹节点

    $("strong").wrap("<b></b>")

    wrapAll()给所有匹配的元素用一个元素来包裹

    $("strong").wrapInner("<b></b>")在strong标签内的内容被一对<b>标签包裹

    11属性操作

    attr()方法来获取和设置元素属性,removeAttr()方法来删除属性

    toggle(fn,fn)   交替执行代码

    toggleClass()  如果类名存在则删除它,不存在则添加他

    hasClass()可以判断元素中是否含有某个class如果有返回true,否则返回false

    等价于.is(".")方法

    val() 可以用来设置和获取元素的值,也可以是select,checkbox,radio相应的选项被选中

    $(":checkbox").val(["check2","check3"])

    $(":radio").val(["radio1"])

    $("#single option:eq(1)").attr("selected",true)

    radio checked true

    this.defaultValue就是当前文本框的默认值

    focus()方法  用于处理获得焦点时的事件

    blur()方法  处理失去失焦时的事件

    遍历节点:

    childen() 取得匹配元素的子元素集合。且只考虑子元素不考虑其他后代元素

    next() 取得匹配元素后面紧邻的同辈元素

    prev()取得匹配元素前面紧邻的同辈元素

    silbings()  用于取得匹配元素前后的所有同辈元素

    closest() 该方法用于取得最近的匹配元素如果匹配直接返回本身,不匹配向上查找父元素直到找到匹配元素

    parent()  获得集合中每隔匹配元素的父级元素

    parents() 获得集合中每个匹配元素的祖先元素

    css(" "," ")

    offset() 获取元素在当前视窗的相对偏移

    position()相对于最近一个样式属性设置为relative或者absolute的祖父节点的相对偏移与offset一样返回top和left两个属性

    scrollTop()

    scrollLeft()

    jquery中事件和动画

    $(document).ready(function(){})===$(function(){})===$().ready(function(){})

    bind(type[,data],fn)匹配元素并 进行事件绑定

    hover(enter,leave)移动到 移动出  分别触发两个事件

    toggle(fn1,fn2,fn3,……fnN)连续单击事件

    阻止事件冒泡:

    $("").bind("",function(event){

    event.stopPropagation();

    })

    阻止默认行为:如表单不符合提交,阻止表单的提交

    function(event){  event.preventDefault();}

    如果既想阻止事件冒泡,又想阻止默认行为,可以return false;

    事件对象属性:

    event.type  获取事件的类型

    event.preventDefault()  阻止默认事件行为

    event.stopPropagation() 阻止事件冒泡

    event.target()获取到触发事件的元素

    event.pageX光标相对于页面的X坐标

    event.pageY光标相对于页面的Y坐标

    event.which 在鼠标单击事件中获取到鼠标左中右,在键盘事件中获取键盘的按键

    event.metaKey获取ctrl按键

    移除事件

    $('').unbind();

    unbind(type,data)第一个是事件类型,第二个是移除的函数

    没有参数则删除所有绑定事件,

    对于只需要触发一次即可立即解除绑定的情况用one()

    one(type,data,fn)用法与bind()类似

    fadeIn()通过逐渐改变透明度来显示消失

    fadeOut()

    slideUp()

    slideDown()

    1jquery中动画都可以通过添加参数来控制速度

    2jquery中动画都可以添加回调函数

    animate(params,speed,callback)  1样式属性如{left:“500PX”} 若在500PX前添加+= 则在当前位置上加入 2速度参数 3回调函数

    若添加多个params属性则会同时执行,若想要一次执行则需要多个animate

    stop()只会停止当前动画,若有多个animate 应加入参数true stop(true)来停止会停止当前动画并清空动画队列

    stop(false,true)停止当前动画直接到达当前动画末状态

    stop(true,true)停止当前动画并清除动画列表,并到达动画末状态

    !!!if(!$(element).is(":animated")){如果没有动画状态添加动画}经常用来使用放置在开头位置

    delay()延迟动画

    toggle()切换元素的可见与隐藏

    slideToggle()通过高度变化来切换可见性

    fadeTo()可以吧元素的不透明度以渐进方式调整到指定值

    fadeToggle()通过不透明度变化来切换匹配元素可见性

  • 相关阅读:
    buuctf-misc 一叶障目
    攻防世界-web ics-05
    攻防世界-web ics-06
    攻防世界-web NewsCenter
    攻防世界-web upload1
    攻防世界-web unserialize3
    攻防世界-web PHP2
    攻防世界-web2
    gitlab常用命令
    javascript编程风格
  • 原文地址:https://www.cnblogs.com/hengqianduan/p/4067863.html
Copyright © 2020-2023  润新知