文章目录
- 一、jQuery 基本用法
-
- 1. 入口函数的写法
- 2. jQuery 的冲突问题
- 3. 核心函数
- 4. 对象
- 5.静态方法和实例方法
- 6. each 方法
- 7. map 方法
- 8. 其他静态方法
- 9.holdReady 方法
- 10.内容选择器
- 11. 属性节点
- 12.attr 方法
- 13.prop 方法
- 14. 操作类相关方法
- 15. 文本值相关方法
- 16. 操作 css 样式方法
- 17. 位置和尺寸操作的方法
- 18. 事件绑定
- 19.事件移除
- 20.事件冒泡默认行为
- 21.事件自动触发
- 22. 自定义事件
- 23.事件命名空间
- 24. 事件委托
- 25.移入移出事件
- 26.显示\隐藏\切换
- 27. 滑入、划出、划入划出切换
- 28.stop方法
- 30.自定义动画
- 31.delay 方法
- 32. 无限循环滚动
- 33.添加节点
- 34.删除节点
- 35.替换
- 36. 复制节点相关方法
- 二、 jQuery 进阶
一、jQuery 基本用法
1. 入口函数的写法
- 1:
$(document).ready(funciton () {
// body
})
- 2:
jQuery(docuement).ready(funciton () {
//body
})
- 3: 推荐
$(funciton () {
// body
})
- 4:
jQuery(funciton () {
// body
})
2. jQuery 的冲突问题
比如 jQuery 的
$
符号与其他框架冲突了,此时可以释放$
的使用权
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var c = jQuery.noConflict();
c(function () {
alert("hello lnj");
});
3. 核心函数
$()
:
- 可以接收一个函数
- 或者一个字符串、字符串选择器
- 或者一个字符串代码片段
- 或者一个 DOM 元素
- 返回的都是一个 对象
4. 对象
什么是 jQuery 对象,它是一个伪数组,具有 length
属性
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
$(function () {
var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);
});
</script>
</body>
5.静态方法和实例方法
定义一个类
- 直接添加给类的就是静态方法 -》 直接通过类名调用
- 实例方法就是通过类的实例调用 -》 创建一个实例(或者对象)
funciton AClass() {
}
AClass.staticMethod = funciton () {
alert("111");
}
//调用
AClass.staticMethod();
AClass.prototype.instanceMethod = funciton () {
alert("222");
}
var a = new AClass();
a.instanceMethod();
6. each 方法
原生的 forEach 方法:
第一个参数:遍历到的元素
第二个参数:当前遍历到的索引
注意:原生的 forEach
方法只能遍历数组 ,不能遍历伪数组
var arr = [1,2,3,4,5];
arr.forEach(funciton (value, index) {
console.log(index,value); // 分别打印出索引号 和 值
})
each 方法:
第一个参数: 索引号
第一个参数:遍历到的元素
注意:可以遍历伪数组
var arr = [1,2,3,4,5];
$.each(arr,funciton (index,value) {
console.log(inde,value);// 值与上面相同
})
7. map 方法
原生的 map 方法:
第一个参数: 当前遍历到的元素
第二个参数: 索引号
第三个参数:当前被遍历的数组
注意: 和原生的 forEach
一样,不能遍历伪数组
var arr = [1,2,4,5];
arr.map(funciton (value, index, array) {
console.log(value, index);
console.log(array);
})
jQuery 中的 map 方法:
第一个参数:要遍历的数组
第二个参数:每遍历一个元素之后执行的回调函数的参数
- 函数中的第一个参数: 元素
- 第二个:索引
- 注意:它也可以遍历 伪数组
var arr = [1, 3, 5, 7, 9];
var result = $.map(arr, function(value, index) {
return value + index;
})
each
和 map
的区别:
each 返回值就是:
- 遍历谁就返回谁
- each静态方法不支持在回调函数中对遍历的数组进行处理
map 返回值是:
- 遍历的数组形式返回
- map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
8. 其他静态方法
$.trim();
-
去除两端的空格
- 参数:需要出去空格的字符串
- 返回值:返回新字符串
-
注意: 只会除去两边的空格,中间空格不会
$.trim(" myname is ");//"myname is" 在控制台测试的
$.iswandow();
判断传入对象是否是 window 对象
$.isWindow(arr); // false
$.isWindow(window); // true
$.isArray()
判断是不是真数组, 返回布尔值
arr = [1,3,4,5];
$.isArray(arr); // true
…
9.holdReady 方法
作用: 暂停 ready 执行
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
10.内容选择器
参数 | 作用 |
---|---|
:empty | 找到既没有文本也没有子元素的指定元素 |
:parent | 找到有文本内容或有子元素的指定元素 |
:contains(text) | 找到指定文本内容的指定元素 |
:has(selector) | 找到包含指定子元素的指定元素 |
11. 属性节点
什么是属性?
- 对象身上保存的变量就是属性
如何操作属性:
- 对象.属性名 = 值
- 对象.属性名
- 对象[“属性名”] = 值
- 对象[“属性名称”]
什么是属性节点?
- HTML 标签中添加的属性
如何操作属性节点?
- DOM.setAttribute(“属性名称”, “值”)
- DOM.setAttribute(“属性名称”)
属性和属性节点有什么区别?
- 任何对象都有属性,但是只有DOM对象才有属性节点
<body>
<span name="aa"></span>
<script>
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "bb");
console.log(span.getAttribute("name"));
</script>
</body>
12.attr 方法
attr ( name | pro | key, value | fun )
- 获取或者设置属性节点的值
- 如果只传递一个参数,代表获取属性节点的值
- 如果传递两个参数,代表设置属性节点的值
- 注意:
- 如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
- 如果是设置:找到多少个元素就会设置多少个元素,如果设置的属性节点不存在,系统会自动新增。
<script>
$(function () {
/*
1.attr(): 设置或者获取元素的属性节点值
*/
// 传递一个参数, 返回第一个元素属性节点的值
// console.log($("span").attr("class"));
// 传递两个参数, 代表设置所有元素属性节点的值
// 并且返回值就是方法调用者
// console.log($("span").attr("class", "abc"));
// 传递一个对象, 代表批量设置所有元素属性节点的值
$("span").attr({
"class": "123",
"name": "888"
});
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="it222"></span>
</body>
removeAttr(name)
- 删除属性节点
- 删除多个节点用 空格 隔开
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<script>
$("span").attr("class", "1");
$("span").attr("abc", "123");
$("span").removeAttr("class name")