jquery学习笔记 | 选择器 / 样式、属性、节点操作 / 事件机制

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有一个marginTop
    if($(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);
});