爱站程序员基地目录
- 1 选择器
- 1.1基本选择器
- 1.2层级选择器
- 1.3过滤选择器
- 1.4筛选选择器(方法)
- 2.1css操作
- 2.2class操作
- 3.1attr方法
- 3.2prop方法
- 4.1创建与添加节点
- 4.2清空与删除节点
- val方法
- html方法与text方法
- width方法与height方法
- scrollTop与scrollLeft
- offset方法与position方法
- 6.1on注册事件
- 6.2事件解绑与事件触发
1 选择器
1.1基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结：跟css的选择器用法一模一样。
1.2层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
跟CSS的选择器一模一样。
1.3过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为偶数的元素 |
1.4筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”); | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next(); | 找下一个兄弟 |
| prev() | $(“li”).prev(); | 找上一次兄弟 |
2 操作样式
2.1css操作
css方法的三种作用：
- css(name,value) : 设置单个样式
- css(obj) : 设置多个样式
- css(name) : 获取样式
注：隐式迭代：
设置操作的时候：会给jq内部的所有对象上设置相同的值。
获取的时候：只会返回第一个元素对应的值。
2.2class操作
| 方法 | 用途 |
|---|---|
| addClass | 添加类 |
| removeClass | 移除类 |
| hasClass | 判断是否有类 |
| toggleClass | 切换类 |
3 操作属性
3.1attr方法
attr方法的三种作用：修改单个属性；修改多个属性；获取属性
3.2prop方法
对于布尔类型的属性（disabled ; checked ; selected），不要用attr方法，应该用prop方法，二者用法一样
4 节点操作
4.1创建与添加节点
创建：$();
添加：
$(\"div\").append($(\"p\"));
//添加到子元素的最后面（或
$(\"p\").appendTo($(div\"));
）
$(\"div\").append($(\"p\"));
//添加到子元素的最前面（或
$(\"p\").appendTo($(\"div\"));
）
4.2清空与删除节点
清空节点：
$(\"div\").empty();
删除节点：
$(\"div\").remove();
5 特殊属性操作
-
val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值$(\"#name\").val(“张三”);//获取值$(\"#name\").val();
-
html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容$(“div”).html(“<span>这是一段内容</span>”);//获取内容$(“div”).html();//设置内容$(“div”).text(“<span>这是一段内容</span>”);//获取内容$(“div”).text();
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
-
width方法与height方法
设置或者获取高度
//带参数表示设置高度$(“img”).height(200);//不带参数获取高度$(“img”).height();
获取网页的可视区宽高
//获取可视区宽度$(window).width();//获取可视区高度$(window).height();
-
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度$(window).scrollTop();//获取页面被卷曲的宽度$(window).scrollLeft();
-
offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}$(selector).offset();//获取相对于其最近的有定位的父元素的位置。$(selector).position();
6 事件机制
6.1on注册事件
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。$(selector).on( \"click\", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定$(selector).on( \"click\",“span”, function() {});
on注册事件的语法
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）// 第四个参数：handler，事件处理函数$(selector).on(events[,selector][,data],handler);
6.2事件解绑与事件触发
事件解绑
// 解绑匹配元素的所有事件$(selector).off();// 解绑匹配元素的所有click事件$(selector).off(\"click\");
事件触发
$(selector).click(); //触发 click事件$(selector).trigger(\"click\");
7 其他
-
end方法
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
-
each方法
// 参数一表示当前元素在所有匹配元素中的索引号// 参数二表示当前元素（DOM对象）$(selector).each(function(index,element){}); -
$ 冲突解决 ( jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.)
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c
示例
固定导航栏：
$(window).scroll(function(){//判断卷去的高度超过topPart的高度//1.让navBar有固定定位//2.让mainPart有一个marginTopif($(window).scrollTop() >= $(\".top\").height()){$(\".nav\").addClass(\"fixed\");$(\".main\").css(\"marginTop\",$(\".nav\").height()+10);}else{$(\".nav\").removeClass(\"fixed\");$(\".main\").css(\"marginTop\",10);}})
返回顶部：
$(window).scorll(function(){if($(window).scrollTop()>=1000){$(\".actGotop\").fadeIn(1000);}else{$(\".actGotop\").fadeOut(1000);}});$(\".actGotop\").click(function(){$(\"html,body\").animate({scrollTop:0},3000);});
