jQuery 第二章 实例方法 DOM操作取赋值相关方法

取赋值相关方法:

    .html()

  .text()

  .val()

  .size()

  .addClass()

  .removeClass()

  .hasClass()

  .html()

html方法干嘛的呢,底层原理 是用原生js的 innerHTML 实现的,接下来,来看一下怎么使用它, 有什么区别。

其实基本使用跟innerHTML 差不多,但是正常的jquery 方法来讲,$('ul li').html() 像这样,你选的是ul 下面的全部li,正常来讲,取出的值应该是

有多少个li  就取多少个 li,但是,偏偏他就不一样, 它只会取第一个li的值,这点大家要注意点就好。

  一般来用,需要写html结构的话,用html(), 用text() 他是不会帮你解析成 html 结构的。参数 可传 函数,跟数组上的 forEach 有点像:

  函数的使用

   

  .text() 

text() 方法底层也是使用原生js 的innerText方法实现的,使用方法跟html() 方法差不多, 有一点差别就是 取值。 第一个取值。其他使用

都一样,也可以传函数等。


  .size()

.size()方法 等于 原生 js 里面的.length    原生js 取 长度用length, jquery取长度,使用size.

  .addClass()

为你所选的dom元素添加 class 名。

$('ul').addClass('nav active');

根据选择器选择的dom元素添加 class  写一个class  就添加一个,  如果想添加两个, 只需要打一个空格隔开。

如果选择器选了多个dom元素, 也会为所选的全部dom 添加class。

  .removeClass()

删除你所选的 class ,删除多个, 用空格隔开,填上class,  如果想删除全部, 不填就可以

        $('ul').addClass('nav active'); //为ul添上 nav active 类名,
        $('ul').removeClass('active');//移除ul 上的 active 类名;

  .hasClass()

先看下面的小案例吧,先选了 全部li, 然后.hasClass('box'), 返回结果为true, 意思是,我选的这堆li 里面 存着 有box  这个class。

   

  .val()

一般value 值,都会出现在 form 表单里面的input, 不例外,.val()方法, 就是获取 input 上面的value值。

有一个小的注意点, 和 .html()  方法 一样, 选取了 一堆标签, 然后调用val() 方法, 它 只会返回第一个 dom元素上的 value 值 

获取 ↓

赋值 ↓

可以传入函数  ↓

注意点 ↓, 即使你选了一堆 input 也只能获取第一个input 的 value 值 

通过.val() 修改 value 值,  在视觉上 效果不会改变, 但是实际上已经改完了, 获取 也是获取到 你修改后的值, 并不会影响你接下来的操作

 

原文地址:https://www.cnblogs.com/yanggeng/p/10842455.html