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 内容).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 协议 ,转载请注明出处!