jQuery语法

一、简介

1. 什么是jQuery

• jQuery：是一个优秀的JavaScript轻量级框架之一。

2. jQuery引入

• 在HTML里使用标签script引入js文件

<script src="jQuery类库的路径"></script>
<script>
//使用jQuery
</script>

二、js对象和jQuery对象转换

• js对象：js语法提供的对象，或者使用js方法得到的对象
• jQuery对象：使用jQuery方法得到的对象

• js对象转jQuery对象：$(js对象)
• jQuery对象转js对象：jQuery对象[索引] 或者 jQuery对象.get(索引)

//用js方式获取d1对象
var d1Js = document.getElementById("d1");
var inner = $(d1Js).html();
alert(inner);

//jquery对象都是类数组，数组里的每个元素都是js对象
//用jquery方式获取d1对象
var d1Jq = $("#d1");
var inner = d1Jq[0].innerHTML;
alert(inner);

三、选择器

1. 基本选择器

• 标签选择器：div表示选择所有的div元素
• ID选择器：#d1表示选择id为d1的元素
• 类选择器：.c1表示选择类名为c1的元素
  | 选择器 | 描述 |
  | ------------------------------------------------------- | ---------- |
  | $("元素名称")，比如：$("div") | 标签选择器 |
  | $("#id值")，比如：$("#d1") | ID选择器 |
  | $(".类名")，比如：$(".c1") | 类选择器 |
  | $("selector1, selector2, ...")，比如：$("div,span") | 并集选择器 |

2. 层级选择器

选择器	描述
$("A B")	后代选择器，获取到A的后代元素B。比如：$("div a")找div的后代元素a
$("A>B")	子选择器，获取到A的子元素B。比如：$("div>a")找div的子元素a
$("A+B")	next选择器，获取A元素后边挨着的B元素（B是A挨着的弟弟）
$("A~B")	siblings选择器，获取A元素后边同级所有的B元素（B是A的弟弟妹妹们）

3. 属性选择器

选择器	描述
$("A[attr]")	获取 含有attr属性的 A元素。$("input[class]")，找含有class属性的input标签
$("A[attr=v]")	获取 attr属性值等于v的 A元素。$("input[type='text']")，找文本框
$("A[][]...")	复合属性选择器。$("input[class][type='text']")，找有class属性的文本框
$("A[attr!=v]")	获取 attr属性值不等于v的 A元素
$("A[attr^=v]")	获取 attr属性值以v开头的 A元素
$("A[attr$=v]")	获取 attr属性值以v结尾的 A元素
$("A[attr*=v]")	获取 attr属性值里包含v的 A元素

4. 基本过滤选择器

• 通常是和其它选择器配合使用的，用于进行再次过滤

选择器	描述
:first	获取第一个，$("div:first")找第一个div
:last	获取最后一个，$("span:last")找最后 一个span
:not(selector)	排除 selector的结果不要，$("div:not(.cls)")找div，但是不要.cls的
:even	获取索引为偶数的，$("div:even")
:odd	获取索引为奇数的
:eq(n)	获取索引等于n的
:gt(n)	获取索引大于n的
:lt(n)	获取索引小于n的
:header	获取所有的标题，h1~h6
:animated	获取正在运行的动画

5. 表单属性选择器

选择器	描述
:enabled	获取可用的表单项
:disabled	获取不可用的表单项
:checked	获取被选中的radio（单选选项），或者checkbox（多选选项）
:selected	获取被选中的下拉选项option

四、dom操作

1. 操作标签体

• 标签体：开始标签 和 结束标签中间的内容

方法	参数	描述
html([value])		获取/设置标签体
text([value])		获取/设置标签体里的文本
val([value])		获取/设置表单项的值

• html()获取开始标签和结束标签里的所有内容；text()获取开始标签和结束标签里的文本内容
• html(string)设置的html代码会生效；text(string)设置了html代码不生效

2. 操作属性

方法	参数	描述
attr(name [,value])	name：属性名称	获取/设置属性值
prop(name [,value])		获取/设置属性值

3. 操作样式

方法	参数	描述
css(name [,value])	name：样式名称	获取/设置样式
addClass(className)		添加类名
removeClass(className)		删除类名

4. 操作标签

方法	参数	描述
$("完整html代码")		创建标签。$("<li>WOW</li>")
parent.append(element)	element：要插入的标签对象	在结尾插入element
parent.prepend(element)		在开头插入element
ele.before(element)		把element插入ele前面
ele.after(element)		把element插入ele后面
remove()		删除元素
empty()		清空元素

五、事件

基本事件绑定

jQuery与js事件写法对比

js事件写法	jQuery事件写法
onclick单击	click(fn)
ondblclick双击	dblclick(fn)
onsubmit表单提交	submit(fn)
onchange域内容改变	change(fn)
onload加载完成	$(fn),$(document).ready(fn)
onfocus获取焦点	focus(fn)
onblur失去焦点	blur(fn)
onkeydown键盘按键按下	keydown(fn)
onkeypress键盘按键按下、按住	keypress(fn)
onkeyup键盘按键弹起	keyup(fn)
onmousedown鼠标按键按下	mousedown(fn)
onmouseup鼠标按键弹起	mouseup(fn)
onmouseover鼠标移入	mouseover(fn)
onmouseout鼠标移出	mouseout(fn)
onmousemove鼠标移动	mousemove(fn)

事件绑定与解绑

• 绑定事件：

  • 事件名称：不带on，比如：click, dblclick

  $("#div1").on("click", function(){
      alert("鼠标点击");
  });
  
  //两种方式绑定事件，结果是一样的
  $("#div1").click(function(){
      alert("鼠标点击");
  });
  

• 解绑事件：

  $("#div1").off("click");
  

未来元素的事件

• 未来元素：事件绑定之后，再添加的新元素。普通方式是不能给未来元素绑定事件的
• 给未来元素绑定事件：jQuery对象.on("事件名称","选择器", function(){})

  //给foodList清单下，所有的li绑定事件：单击弹窗（哪怕li是未来元素，仍然可以绑定成功）
  $("#foodList").on("click", "li", function(){
      alert(this.innerHTML);
  });
  

• 给未来元素解绑事件：jQuery对象.off("事件名称","选择器")

  //要给foodList清单下，所有的li解绑事件：单击事件（哪怕是未来元素的事件，也可以解绑）
  $("#foodList").off("click", "li");
  

六、循环遍历

1. js的循环遍历

• fori 循环

  for (var i = 0; i < items.length; i++) {
      var item = items[i];
      alert(item.innerHTML);
  }
  

• for of循环

  for(var item of items){
      alert(item.innerHTML);
  }
  

2. jQuery的循环遍历

• jQuery框架的each方法

  var $items = $("li"); //jQuery对象是数组，数组里每个元素都是js对象
  //1. 使用jQuery框架的each方法
  $.each($items, function(index, element){
      //index：当前索引； element：当前对象，是js对象
      alert("索引是：" + index + ", 当前元素内容是：" + element.innerHTML);
  })
  

• jQuery对象的each方法（每个jQuery对象都有each方法，是循环jQuery对象自己的）

  var $items = $("li");
  //2. 使用jQuery对象的each方法。循环jQuery对象自己的
  $items.each(function(index, element){
      //index：当前索引； element：当前对象，是js对象
      alert("索引是：" + index + ", 当前元素内容是：" + element.innerHTML);
  });