2016.12.12 Jquery

引号的问题

$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');

上面的代码加不加引号都是正确的

什么时候必须加引号呢?

<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//当属性的值有空格的 会报错
</script>

这个时候我们就必须加上引号

#JQ的链式操作

一步一步的操作:
链式操作 :

$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});

注意: JQ中的可以链式操作的是针对设置的操作, 取值的操作不能进行链式操作

命名的规范

$div $span

JQ的容错性

在原生js种, 如果没有找到相应的DOM元素, 执行后续操作会报错
在JQ中没有找到也不会报错, 最多是不执行任何的操作

这就是JQ的容错性

它是把双刃剑:

  • 优点: 不报错, 不影响后续代码的执行
  • 缺点: 不好调试

集合的长度

$()获取到的都是一个集合

集合中只有一个元素,它也是一个集合 $('#id');

它的结构很像数组,有下标, 有length

class的操作

  • addClass()
  • removeClass()
  • toggleClass()
<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不执行任何操作
$div.addClass('box4 box5');//增加多个class, 用空格隔开
</script>
<div id="div1" class="box1 box2">aaaaa</div>

<script>
var $div = $('#div1');
$div.removeClass('box1');//删除class
$div.removeClass('box3');//删除class, 如果存在, 不执行任何操作
$div.removeClass('box4 box5');//删除多个class, 用空格隔开

</script>

显示隐藏

  • show()/hide()
    show()和hide() 可以智能的判断display

next()

选择下一个兄弟节点

prev()

选择上一个兄弟节点

nextAll()

选择下面所有的兄弟节点

prevAll()

选择上面所有的兄弟节点

siblings()

选择所有的兄弟节点

参数的筛选功能

上述方法都可以传入一个选择器字符串作为参数,用于对结果进行筛选

下标

  • eq()

节点的选择

first()

获取当前结果集中的第一个对象 相当于eq(0)

last()

获取当前结果集的最后一个对象

slice()

children()

获得匹配元素集合中每个元素的子元素

find()

查找符合选择器的后代元素

节点的选择(父节点)

parent()

获得匹配元素集合中每个元素的父元素
从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。
必须要接收一个参数

节点的操作

创建节点

//原生的方式
var oDiv = document.createElement('div');

//jq的方式
var $div = $('<div>')

注意: 要加<``>,不然就变成选择

插入子节点

append()

在每个匹配元素里面的末尾处插入参数内容。

它的参数可以是DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象,用来插在每个匹配元素里面的末尾。

prepend()

将参数内容插入到每个匹配元素的前面(元素内部)。

参数DOM元素,元素数组,HTML字符串,或者jQuery对象,将被插入到匹配元素前的内容。

插入兄弟节点

before()

after()

节点的操作

  • remove() 删除节点
  • clone() 克隆节点
    • 默认不克隆事件
    • 如何克隆事件 clone(true)

JQ中的索引

index()

第一种用法,兄弟中的排行

JQ中的遍历

遍历就是循环

我们知道在JQ中有很多的省略循环的方法比如说css click ...

但有时候我们也需要自定义循环操作

.each()

回调函数的两个参数

  • 第一个参数代表下标
  • 第二个参数代表每个原生dom对象

退出循环

我们知道在for循环中我们是用break来退出整个循环

在.each() 中 我们用return false来退出整个循环

JQ转原生JS

  • get()
  • 与eq的区别
  • 为什么要转,比如:
    • 获取内容的高度
    • 元素之间的比较

get()

获取原生都dom对象

$('div').get(0).innerHTML = 'sdfsdf';

与eq的区别

get方法得到的是原生dom对象, eq得到的是jquery对象

$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');

为什么要转

获取内容的高度

想要获取textarea里内容的实际高度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,441评论 0 44
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,673评论 18 503
  • 产品狗入门笔记,告诉自己要学什么。 接需求、画流程,出原型、写PRD,样样都得行。 附百度百科种PRD释义 产品需...
    sinajina阅读 610评论 0 0
  • 客户端 znode 可能含有数据,也可能没有。如果 znode 包含数据,那么数据存储为字节数组(byte arr...
    PFF阅读 1,112评论 0 1