jquery 基础

jquery 基础

1.什么是 jQuery

jQuery 是个快捷,小型且丰富的 JavaScript 库,通过易于使用的 API(可在多种浏览器中使用),它使 HTML 文档的遍历操作,事件处理,动画和 Ajax 等事件变得更加简单,兼具多功能和可扩展性,JQuery 改变了数百万人编写 JavaScript 的方式。

2、处理了兼容性,直接调用就好

**  **   简便  document.getElenmentById(‘id’) ==> $(‘#id’)

大量的插件库,节约时间成本

3.开发环境:给开发者看,要读懂,要用的

生产环境:用户使用,会有管你代码。越小越好。

打包工具  gulp webpack

4.版本号  a.b.c

a>主板本号(大改动,和原来不一样了)

b>次版本号(bug 修改,增加功能删除功能)

c>小版本号 (代码有改动,使用没有发生改变)

0.0.1 -测试版

5.jQuery == $

6.$(‘选择器’) 得到的是 Jquery 对象

获得节点,要用下标

jQuery 对象才可用使用 jq 库里面的方法

7.选择器中的转义 \ 被转义的特殊字符,每个特殊字符前面都需要加 </font> 进行转义。

8.原生对象里的选择器,jquery 都支持

id class 后代 子代 并集 交集 css3 新增选择器

9.jq 新增的选择器,只能 jq 里可以用

**    **<index 下标从 0 开始>

:first  :last  :even 偶数   :odd 基数   :eq(index)

:gt(index)不包括自己   :header h1-h6 标签内的

:parent -jq 可以找父元素了

:animated 执行动画效果的元素

${“:root”} –html 节点

(“:contains(‘div’)”) –选择全局中包含div 的 引号涉及嵌套只能小套大,或者大套小,不能一用一种引号

:hidden :visible  -都是针对 display none

:input -所有 input,textarea,select,button 元素

10.节点操作

$(父节点).append(子节点)

$(子节点).appendTo(父节点)

$(父节点).prepend(子节点)

$(子节点).prependTo(父节点)

$(哥哥).after(弟弟)

$(弟弟).before(哥哥)

$(弟弟).insertAfter(哥哥)

$(哥哥).insertbefore(弟弟)

wrap 每个都给爹

unwrap 每个都把爹干掉

wrapAll 给一个爹

wrapInner 给自己找孩子,给原来的孩子找爹

**    $**(**‘p’**).wrapInner(**‘

‘****)**;//参数可以是 HTML 标签

$(旧节点/或旧 html 内容).replaceWith(新内容) 以新换旧

$(新内容).replaceAll(选择器) 把选择器内的东西换成新内容。

$(节点).empty()  -清空选择器选中的内容

$(节点).remove   删除标签(节点)内的所有内容。

$(节点).detach  标签(节点)都会被删除。和 remove 类似但是所有绑定的事件,附加的数据等都会保留下来,且不会从 jq 对象中删除。

$(节点).dat 删除节点内容

$(节点).clone(事件克隆,true) 事件克隆如果是 true,节点上的事件也是可以克隆(但事件必须是 jq 添加的事件),

第一参数必须为 true,第二个参数才有意义。表示深度克隆的内容的事件克隆。

true 子节点的事件也克隆

false 子节点的事件不克隆

筛选

**   ** $(“p”).eq(1) -把所有 p 取出来,再从中把第二个 p 取出来。

$(‘p’).hasClass(‘类名’) p 中有 class 名为 ’类名‘的找出来

is -返回 true 或者 false 判断是否有。

** ** **  $(‘节点’).map(function(i,v){**

console.log(this) this 指向节点。

val() //表示节点的值

v 是每个节点;

i 是下标

}) 遍历每个 jq 对象。

—返回一个 jq 对象的数组。

$(‘li’).has(‘ul’) 得到有 li 有 ul 子节点的 li

$(‘节点’).closest(‘ul’) 从自己这一层开始找,直到找到符合条件的。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!