04 jquery(1)

JQuery是一个JavaScript的框架，是对JavaScript的一种封装。

一. 基础知识点

1. 使用jquery前需导入jquery.min.js

2. 文档加载
   为了防止在完全加载之前就运行了JQuery代码,有两种方式

3. 通过id获取元素
   通过$("#id")就可以获取
   document.getElementById(“id”)获取的是元素节点
   $(#id)获取的是jquery对象

4. 增加监听器
   JavaScript需要在html元素上增加监听事件，而JQuery不需要在html元素上进行操作，故维护更方便
   $("#btn").click(function(){
   alert(“点击事件”);
   });

5. 隐藏与显示
   取到div对象后，直接调用内置的hide()和show()方法

$(function(){
$("#btn1").click(function(){
	$("#div1").hide();
});
$("#btn2").click(function(){
	$("#div1").show();
});
})

二.常用方法

1.取值通过val()方法获取值
$("#test").val()相当于document.getElementById(“test”).value

2.获取元素内容

• html():获取元素内容，如果有子元素，保留子元素标签
• text():获取元素内容，如果有子元素，不保留子元素标签

div里的内容 span里的内容

$("#id").html(); //返回:div里的内容 span里的内容 $("#id").text(); //返回：div里的内容span里的内容

三. 操作CSS

1. 增加class
   通过addClass() 增加一个样式中的class
   例：

<script>
$(function(){
   $("#b1").click(function(){
	  $("#d").addClass("pink"); //添加样式
   });
});
</script>
<button id="b1">增加背景色</button>
//创建pink样式
<style>
.pink{
background-color:pink;
}
</style>

2. 删除class
   通过removeClass()删除一个样式中的class
   操作同addClass()

3. 切换class
   通过toggleClass() 切换一个样式中的class
   操作同addClass()
   若存在，就删除
   若不存在，就添加

4. css函数
   通过css函数直接设置样式
   css(“样式属性”:“样式值”,“样式属性”:“样式值”)
   $("#d").css(“background-color”:“black”,“color”:“green”);
   注：属性和值都要用引号"包含起来

四. 选择器

1. 元素选择器
   $(“tagName”)
   选择所有该标签的元素

2. id选择器
   $("#d")
   根据id选择元素，id是唯一的，如果id重复则只会选择第一个

3. 类选择器
   $(".className")
   根据class选择元素，选择所有className相同的元素

4. 层级选择器
   $(“selector1 selector2”)
   选择selector1下的selector2元素
   $(“div#div1 span”)

5. 最先、最后选择器

• $(“selector:first”):选择满足选择器条件的第一个元素
• $(“selector:last”):选择满足选择器条件的最后一个元素
  例：
  $(".test:first")

6. 奇偶选择器

• $(“selector:odd”):选择满足选择器条件的奇数元素
• $(“selector:even”):选择满足选择器条件的偶数元素
  注：因为是基零的，所以第一个的下标其实是0(偶数)
  例：
  $(".test:odd")

7. 可见性选择器

• $(“selector:hidden”):选择满足选择器条件的不可见元素
• $(“selector:visible”):选择满足选择器条件的可见元素
  注：div:visible和div :visible(有空格)是不同的
  div:visible表示选择可见的div
  div :visible(有空格)表示选择div下可见的元素
  例：
  $(“div:visible”)

8. 属性选择器

• $(selector[attribute]): 满足选择器条件且有某属性的元素 $(“div[id]”)
• $(selector[attribute=value]): 满足选择器条件的属性等于value的元素 KaTeX parse error: Expected 'EOF', got '&' at position 2: (&̲quot;div[id=′t′…(selector[attribute=value]): 满足选择器条件的属性以value结尾的元素
• $(selector[attribute*=value]): 满足选择器条件的属性包含value的元素

9. 表单对象选择器
   表单对象选择器指的是选中form下会出现的输入元素
   :input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
   :button 会选择type=button的input元素和button元素
   :radio 会选择单选框
   :checkbox 会选择复选框
   :text 会选择文本框，但是不会选择文本域
   :submit 会选择提交按钮
   :image 会选择图片型提交按钮
   :reset 会选择重置按钮

10. 表单对象属性选择器
    :enabled 会选择可用的输入元素 注：输入元素的默认状态都是可用
    :disabled 会选择不可用的输入元素
    :checked 会选择被选中的单选框和复选框 注:checked在部分浏览器上(火狐,chrome)也可以选中selected的option
    :selected 会选择被选中的option元素

11. 当前元素选择器
    $(this)即表示触发该事件的组件