zoukankan      html  css  js  c++  java
  • module5-02-jQuery 常用方法

    jQuery常用方法

    一、jQuery操作标签的内容

    1.1 html() 方法

    html()方法相当于原生JS 中的innerHTML属性,用来获取或设置标签内部内容方法可以传递一个参数,自定义的字符串内容。

    • 获取:文本和内部爆尿潜

      语法:jQuery对象.html()

    • 设置:若设置标签时,标签会被渲染

      语法:jQuery对象.html('文本内容')

    1.2 text() 方法

    text()方法相当于原生JS 中的 innerText属性,用来获取或设置标签内部文字。

    • 获取:仅仅是文本

      语法:jQuery对象.text()

    • 设置:若设置标签时,标签会被当做普通文本

      语法:jQuery对象.text('文本内容')

    1.3 val() 方法

    val() 方法相当于原生JS 中的 value属性,用来获取或设置表单元素内容。

    • 获取:表单元素的value

      语法:jQuery对象.val()

    • 设置:表单元素的value

      语法:jQuery对象.val('文本内容')

    二、jQuery操作标签的属性

    2.1 attr() 方法

    attr:全称attribute,属性的意思。

    作用:用来获取或者设置标签的属性值。

    • 设置:标签的属性

      语法:jQuery对象.attr(name, value)

    • 获取:标签属性值

      语法:jQuery对象.attr(name)

    2.2 removeAttr() 方法

    作用:移除标签的属性

    语法:removeAttr(name)

    2.3 prop() 方法

    针对selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同

    • 获取:

      语法:$('input').prop('属性名')

    • 设置:

      语法:$('input').prop('属性名', 值)

    三、jQuery操作样式方法

    3.1 css() 方法

    • jQuery对象有一个css()的方法,用于调用css属性值或者更改css属性值

    • 语法:jQuery对象.css(name, value)

    • 参数:

      • ① 字符串格式的css样式属性名

      • ② 设置或者更改的属性值

    注意

    • 一个参数:表示获取css属性的值,得到的是某个元素的计算后样式,值为字符串格式

    • 两个参数:表示设置css样式属性,第二个参数可以实字符串格式的属性值带单位的数字的属性值,可以写成但单位的字符串格式、不带单位的字符串、纯数字、带+=等赋值运算的字符串

    • css() 方法的第一个参数,复合属性的单一属性写法可以实驼峰命名法,也可以是横线写法

    • 可以给同一个对象同时设置多条css属性,将多条属性的属性和属性值携写成对象格式,传给css()的参数

    3.2 jQuery操作类名方法

    (1)addClass() 添加类名

    • 语法:jQuery对象.addClass('类名')

    • 参数:字符串格式的类名

    (2)removeClass() 移除类名

    • 删除指定的类名

    • 语法:jQuery对象.removeClass()

    • 参数:字符串格式的类名

    • 不穿参数:表示删除所有的类名

    (3)toggleClass() 类名切换

    • 若这个类名存在,移除该类名,否则添加该

    • 语法:jQuery对象.toggleClass('类名')

    • 参数:字符串格式的类名

    • 有点:三个方法只操作参数部分的类名,不影响原有的其它类名

    (4)hasClass检测类名是否存在

    • 语法:jQuery对象.hasClass('类名')

    • 返回值:true和false

    四、jQuery常用事件

    4.1 jQuery常用事件方法

    • jQuery对象封装了一系列的事件方法

    • 事件方法与原生JS事件方法名称类似,不需要写on

    • 事件方法需要jQuery对象打点调用,下括号内的参数是事件函数

    • 例如:

      • click()方法

    4.2 mouseenter() 方法与mouseleave() 方法

    (1)mouseenter() 方法

    • jQuery中子级的事件方法

    • 鼠标进入一个元素触发的事件

    (2)mouseleave() 方法

    • jQuery中子级的事件方法

    • 鼠标离开一个元素触发的事件

    对比

    • 注意:mouseenter和mouseleave没有事件冒泡

    4.3 hover() 方法

    • hover() 事件详单与将mouseenter和mouseleave事件进行了合写

    • 参数:若有两个参数,第一个参数是鼠标移上执行的事件函数,第二个参数是鼠标离开执行事件函数

    五、jQuery关系查找方法

    5.1 $(this)自己

    • 在原生的 DOM操作中,事件函数内部有一个 this关键字指向的就是触发事件的事件源,在 jQuery 中将 this关键字传递给$()方法,得到就是指向自己的 jQuery对象,就可以使用JQ的方法。

    5.2 parent() 父级

    • jQuery 对象都有一个 parent()方法,得到的是自己的父亲级。

    • 父级得到的也是一个 jQuery 对象,直接继续打点调用JQ方法和属性。

    5.3 children() 子级

    • jQuery对象内部有一个children()方法,可以得到自己的所有子级元素组成的 jQuery对象

    • 得到的子级组成的 jQuery对象可以继续调用JQ方法和属性。

    • 获得子级时,不限制标签类型。

    • children()可以传参数:参数是字符串格式的选择器,在选中所有子级的情况下,保留满足选择器的部分,进行了二次选择。

    5.4 siblings() 兄弟

    • jQuery对象通过调用siblings() 方法可以得到除了自己以外的所有同级元素(兄弟)组成jQuery对象,找到的只能是亲的兄弟,不能是叔叔家的兄弟

    • 得到jQuery 对象可以继续使用JQ的方法和属性。

    • siblings()方法得到的 jQuery对象可以进行二次选择,通过给参数传递字符串格式的选择器

    六、链式调用

    • jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是 jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用JQ的方法和属性。

    • 可以使用 jQuery 对象进行连续打点调用。

    七、jQuery 其他关系查找方法

    (1)find() 后代元素

    • jQuery对象可以利用find() 方法,传递一个参数,参数部分规定的选择器,查找范围是jQuery对象的所有后代

    • 参数是字符串格式的选择器

    (2)兄弟元素

    紧邻的兄弟元素方法

    • next() 下一个兄弟

    • prev() 前一个兄弟

    多选方法

    • nextAll() 后面所有兄弟

    • prevAll() 前面所有兄弟

    • 通过传递参数可以进行二次选择,参数是字符串格式的选择器,在前面或后面兄弟中选中复合选择器的部分(可以添加筛选选择器或者方法

    (3)parents() 祖先级

    通过该方法得到的是指定对象的半酣body在内的所有祖先级元素组成的jQuery对象

    • 通过传参数进行二次选择

    八、综合案例

    • 发送验证码控制按钮禁用

    • 放大镜切换项

  • 相关阅读:
    2018-6-2_《JS操作数组(纯洁方法)》
    Centos7 xfs分区格式化挂载
    centos 常用命令集锦
    docker1.12在cento7里的组建swarm (一)
    centos7线程、文件打开数等调优日志(非优化案例、仅仅是个个人记录、为把相关配置文件记录一下)
    Centos7.2 新镜像、系统到手 更新清理 并且安装docker1.2以后版本 目前内容适合docker 1.7.x ce(社区版)
    程序员新手 0年份等级 指导(一) 开发人员IT架构总览
    docker 土法制作zookeeper镜像 并且搭建集群 基于centos7.2
    centos 删除多余的内核启动项
    docker1.12在cento7里的组件swarm (二)
  • 原文地址:https://www.cnblogs.com/lezaizhu/p/14267712.html
Copyright © 2011-2022 走看看