JavaScript基础——第五章，jQuery与JavaScript

文章目录

• jQuery简介
• 配置环境
• DOM对象和jQuery对象
• DOM对象转jQuery对象
• jQuery对象转DOM对象
• jQuery选择器
• 通过CSS选择器选取元素
• 基本选择器
• 层次选择器
• 属性选择器
• 通过过滤选择器选择元素
• 基本过滤选择器
• 可见性过滤选择器
• jQuery选择器注意事项

jQuery简介

• jQuery由美国人John Resig于2006年创建
• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
• 它的设计思想是write less，do more

配置环境

<script src="js/jQuery-1.12.4.js" type="text/javascript"></script>

DOM对象和jQuery对象

• **DOM对象:**直接使用JavaScript获取的节点对象
• **jQuery对象:**使用jQuery包装DOM对象后产生的对象，它能使用jQuery中的方法
• DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

DOM对象转jQuery对象

使用$ () 函数进行转化$ () DOM对象

// DOM对象
var txtName = document.getElementById("txtName");
// jQuery对象
var $txtName = $(txtName);

jQuery对象命名一般约定以$开头 在时间中经常使用$(this)，this是触发该事件的对象

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

// jQuery对象
var $txtName = $("#txtName");
// DOM对象
var txtName = $txtName.get(0);

jQuery选择器

jQueryjQuery选择器功能强大，种类也很多，分类如下

通过CSS选择器选取元素

基本选择器

基本选择器包括

• 标签选择器
  根据给定的标签名匹配元素

$("h1").css("color","blue")

• 类选择器
  根据给定的class匹配元素

$(".price").css("color","blue")

• ID选择器
  根据给定的id匹配元素

$("#author").css("color","blue")

• 并集选择器
  用来合并元素集合

$(".intro,dt,dd").css("color","blue")

• 全局选择器
  可以获取所有元素

$("*").css("color","blue")

层次选择器

层级选择器通过DOM元素之间的层次关系来获取元素

• 后代选择器
  用来获取元素的后代元素

$(".textRight p").css("color","blue")

• 子选择器
  用来获取元素的子元素

$(".textRight>p").css("color","blue")

• 相邻元素选择器
  用来选取紧邻目标元素的下一个元素

$("h1+p").css("color","blue")

• 同辈选择器
  用来选取目标元素之后的所有同辈元素

$("h1~p").css("color","blue")

属性选择器

属性选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$("[href^=‘en’")选择href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$("[href $= ‘.jpg’")选择href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值得元素	$("[href *= ‘txt’")选择href属性值中含有txt的元素

通过过滤选择器选择元素

基本过滤选择器

可见性过滤选择器

通过元素显示状态来选取元素

$("p:hidden").show();
$("p:visible").hide();

jQuery选择器注意事项

• 特殊符号的转义
• 选择器中的空格