资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jQuery笔记

目录

我们提供的服务有:成都网站设计、做网站、微信公众号开发、网站优化、网站认证、富拉尔基ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的富拉尔基网站制作公司

jQuery选择器

jQuery常用事件

jQuery常用方法

jQuery常用属性

jQuery选择器

基本选择器

层次选择器

属性选择器

名称

示例

名称

示例

名称

示例

标签选择器

$(“h3”)选取所有h3元素

后代选择器

$(“#menu span”)选取#menu下所有的元素

 

 

 

 

 

 

属性选择器

 

$(“[href]”)选取含有href属性的元素

类选择器

$(“.title”)选取所有class为title的元素

子选择器

$(“#menu >span”)选取#menu下的子元素

$(“[href=’#‘]”)选取href属性值为“#”的元素

ID选择器

$(“#title”)选取id为title的元素

相邻选择器

$(“h3+dl”)选取紧邻

元素之后的同辈元素

$(“[href!=’#’]”)选取href属性值不为”#”的元素

并集选择器

$(“div,p,.title”)选取所有div,p和拥有class为title的元素

同辈选择器

$(“h3~dl”)选取

元素之后所有的同辈元素

$(“[href^=’en’]”)选取href属性值以en开头的元素

交集选择器

$(“h3.title”)选取所有拥有class为title的h3元素(id也行)



$(“[href$=’.jpg’]”)选取选取href属性值以.jpg结尾的元素

全局选择器

$(“*”)选取所有元素



$(“[href*=‘txt’]”)选取href属性值中含有txt的元素





$(“li[id][title=新闻要点]”)选取含有id属性和title属性为”新闻要点”的

  • 元素

  • 基本过滤选择器

    名称

    示例

    :first

    $(“li:first”)选取所有

  • 元素中的第一个
  • 元素

  • :last

    $(“li:last”)选取所有

  • 元素中的最后一个
  • 元素

  • :not(selector)

    $(“li:not(.three)”)选取class不是three的元素

    :even

    $(“li:even”)选取索引是偶数的所有

  • 元素

  • :odd

    $(“li:odd”)选取索引是奇数的所有

  • 元素

  • :eq(index)

    $(“li:eq(1)”)选取索引等于1的

  • 元素

  • :gt(index)

    $(“li:gt(1)”)选取索引大于1的

  • 元素(注意:大于1,不等于1)

  • :lt(index)

    $(“li:lt(1)”)选取索引大于1的

  • 元素(注意:小于1,不等于1)

  •  

    jQuery常用方法

    方法

    描述

    备注

    addClass()

    向被选元素添加一个或多个类样式


    css()

    为匹配的元素添加css样式


    Next()

    获得所匹配元素集合中每个元素其后紧邻的同辈元素


    Click()

    触发或将函数绑定到指定元素的click事件


    Show([speed],[callback])

    控制元素显示

    Speed:可选,元素从隐藏到完全可见的速度

    Callback:可选,show函数执行完之后要执行的函数

    Hide([speed],[callback])

    控制元素隐藏

    Speed:可选,元素从隐藏到完全可见的速度

    Callback:可选,show函数执行完之后要执行的函数

    fadeIn([speed],[callback])

    控制元素淡入

    Speed:可选,元素从隐藏到完全可见的速度

    Callback:可选,show函数执行完之后要执行的函数

    fadeout([speed],[callback])

    控制元素淡出

    Speed:可选,元素从隐藏到完全可见的速度

    Callback:可选,show函数执行完之后要执行的函数

    Mouseover()

    触发或将函数绑定到指定元素的mouseover()事件

    鼠标指针移过时

    Mouseout()

    触发或将函数绑定到指定元素的mouseout()事件

    鼠标指针移出时

    Keydown()

    触发或将函数绑定到指定元素的keydown事件

    按下键盘时

    Keyup()

    触发或将函数绑定到指定元素的keyup事件

    释放键盘时

    Keypress()

    触发或将函数绑定到指定元素的keypress事件

    产生可打印的字符时

    KeyCode()

    获取按下键对应的键值


    Focus()

    触发或将函数绑定到指定元素的focus事件

    获得焦点

    Blur()

    触发或将函数绑定到指定元素的blur事件

    失去焦点

    Bind(type,[data],fn)

    为匹配的元素一次性绑定一个或多个事件

    Type事件类型,[data]可选参数(时间),fn函数

    Unbind([type],[fn])

    为匹配的元素一次性移除一个或多个事件

    Type事件类型(可选参数)fn函数(可选参数)

    Hover()

    鼠标指针悬停的事件(鼠标移进,触发第一个函数,移除,触发第二个函数)

    Hover(enter,leave)

    Toggle()

    鼠标连续click事件(单击一次触发一个事件,重复循环)

    Toggle(fn1,fn2….fnN);

    slideUp()

    控制元素从下向上延伸显示


    slideDown()

    控制元素从上向下延伸显示


    animate(params,[speed],[fn])

    用于创建自定义动画的函数

    params:一组包含作为动画属性和终值的样式属性和及其值的集合(多个则用{}括起)

    speed: 表示动画时长的毫秒数值

    fn: 在动画完成时执行的函数,每个元素执行一次

    removeClass(class1,class2)

    移除样式


    toggleClass(class)

    切换不同元素的类样式


    Html([content])

    对HTML代码进行操作,通常用于动态的新增页面内容

    Cotent:可选。规定被选元素的新内容,该参数可以包含HTML标签。无参时,表示获取被选元素的文本内容

    Text()

    获取或设置元素的文本内容,不含HTML标签

    Content:可选。规定被选元素的文本新内容。无参时,表示获取被选元素的文本内容

    Val()

    获取或设置元素value属性值


    Remove()

    将匹配的元素从DOM中删除


    Empty()

    清空元素中的所有后代节点


    replaceWith()

    将所匹配的元素都替换成指定的HTML或者DOM元素


    Clone([includeEvents])

    节点复制

    includeEvents:可选,为布尔值ture或false,规定是否复制元素的所有事件处理

    Attr()

    获取或设置元素属性

    Attr([name]):获取或设置单个属性值,如$($newNode4).attr(“alt”)

    Attr({[name1:value1],name2:value2}……),设置多个属性值,如$(“img”).attr({width:”50”,height:”100”})

    RemoveAttr(name)

    删除元素属性

    参数为属性名称

    Prev([expr])

    获取紧邻匹配元素之前的元素

    参数可选,用于过滤同辈元素的表达式

    Siblings([expr])

    获取位于匹配元素前面和后面的所有同辈元素

    参数可选,用于过滤同辈元素的表达式

    Parent([selector])

    获取当前匹配元素集合中每一个元素的父级元素

    参数可选

    Parents([selector])

    获取当前匹配元素集合中每一个元素的祖先元素

    参数可选

    Children()

    获取当前匹配元素下的所有子元素


    Select()

    (表单验证方法)选取文本域中的内容,突出显示输入区域的内容

    【(onblur,onfocus)表单验证的失去焦点跟获得焦点的事件】

    find(expr|obj|ele)

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    Expr: 用于查找的表达式

    object: 一个用于匹配元素的jQuery对象

    element: 一个DOM元素

     each(callback)

    以每一个匹配的元素作为上下文来执行一个函数。

    Callback: 对于每个匹配的元素所要执行的函数

     live(type, [data], fn)

    事件委托:对一个还没有添加进DOM的元素有效

    type:一个或多个事件类型,由空格分隔多个事件。

    fn:要从每个匹配元素的事件中反绑定的事件处理函数

    插入节点方法

    插入方式

    方法

    描述

     

    内容插入

    Append(content)

    后置,$(A).append(B)表示把B追加到A中

    appendTo(content)

    后置,$(A).appendTo(B)表示把A追加到B中

    Prepend(content)

    前置,$(A). Prepend (B)表示把B追加到A中

    prependTo(content)

    前置,$(A). prependTo (B)表示把A追加到B中

     

    外部插入

    After(content)

    后置,$(A). After (B)表示把B插入到A之后

    insertAfter(content)

    后置,$(A). insertAfter (B)表示把A插入到B之后

    Before(content)

    前置,$(A). Before (B)表示把B插入至A之前

    insertBefore(content)

    前置,$(A). insertBefore (B)表示把A插入至B之前

    正则表达式

    • Var reg=/表达式/附加参数

      • 表达式:一个字符串代表了某种规则,其中可以使用某些特殊字符来代表特殊的规则

      • 附加参数:用来扩展表达式的含义,主要有一下3个参数:

        • g:代表可以进行全局匹配

        • i:代表不区分大小写匹配

        • m:代表可以进行多行匹配

     

    • 正则表达式的常用符号:

    符号

    描述

    /…/

    代表一个模式的开始和结束

    ^

    匹配字符串的开始

    $

    匹配字符串的结束

    \s

    任何空白字符

    \S

    任何非空白字符

    \d

    匹配一个数字字符,等价于[0-9]

    \D

    除了数字之后的任何字符,等价于[^0-9]

    \w

    匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]

    \W

    任何非单字字符,等价于[^a-zA-Z0-9_]

    .

    除了换行符之外的任何字符

     

    • 正则表达式的重复字符:

    符号

    描述

    {n}

    匹配前一项n次

    {n,}

    匹配前一项n次,或者多次

    {n,m}

    匹配前一项至少n次,但是不能超过m次

    *

    匹配前一项0次或多次,等价雨{0,}

    +

    匹配前一项1次或多次,等价于{1,}

    ?

    匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}


    分享标题:jQuery笔记
    文章链接:http://cdkjz.cn/article/pjddoh.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220