[Web 前端] 026 jQuery 初探

目录

• 1. jQuery 简介
• 2. jQuery 的简单操作
  • 2.1 jQuery 选择器
    • 2.1.1 简介
    • 2.1.2 基础选择器
  • 2.2 过滤获取
  • 2.3 父子关系获取
• 3. jQuery 元素操作
  • 3.1 jquery 样式操作
  • 3.2 类名 class 操作
  • 3.3 文本操作
  • 3.4 属性操作

1. jQuery 简介

• jQuery 是一个是免费、开源的 Javascript 库，也是目前使用最广泛的 Javascript 函数库

• jQuery 极大地方便使用者完成 web 前端的相关操作，例如

  • 节点操作
  • 元素操作
  • 事件绑定
  • ajax 操作

• jQuery 还解决了大多数的兼容性问题

• jQuery 的版本分为 1.x 系列、2.x 系列和 3.x 系列

  • 1.x 系列兼容低版本的浏览器
  • 2.x、3.x 系列放弃支持低版本浏览器
  • 目前使用最多的是 1.x 系列的。

• jQuery 的官网

• jQuery 是一个函数库，一个 js 文件，页面用 script 标签引入这个 js 文件就可以使用

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

2. jQuery 的简单操作

2.1 jQuery 选择器

2.1.1 简介

• jQuery 用法思想

  • 选择某个网页元素，然后对它进行某种操作

• jQuery 选择器

  • 可以快速地选择元素，其选择规则和 CSS 样式相同

2.1.2 基础选择器

// 1. 通过 id 来获取元素，类似 document.getElementById();
$('#logo').css('border', 'solid 2px red');

// 2. 通过 class 类名获取元素
$('.w').css('background', '#369');

// 3. 通过标签名来获取元素
$('li').css('background', '#369');

// 4. 逗号 并列获取
$('#logo, #menu').css('background', '#369');

// 5. 空格 层级获取
$('#images li').css('background', '#369');

2.2 过滤获取

// 1. 获取首尾元素
$('ul li:first').css('background', '#369');
$('ul li:last').css('background', '#369');

// 2. 获取指定索引的元素 索引从 0 开始
$('li:eq(7)').css('background','#369');
$('li').eq(7).css('background','#369'); // 此法可以避免字符串的转换

// 3. 获取包含指定文本的元素
$('li:contains(国)').css('background','#369');

// 4. 通过包含指定属性来获取元素 通过属性来获取
$('li[name=y]').css('background','#369');

2.3 父子关系获取

// 1. 获取所有的子元素
$('#images').children().css('background','#369');

// 2. 获取第一个子元素
$('ul li:first-child').css('background','#369');

// 3. 获取最后一个子元素
$('ul li:last-child').css('background','#369');

// 4. 获取指定个数的子元素个数，从 1 开始
$('ul li:nth-child(3)').css('background','#369');

// 5. 获取元素上一个同级元素
$('#f').prev().css('background','#369');

// 6. 获取元素下一个同级元素
$('#f').next().css('background','#369');

// 7. 获取同辈元素 (同辈元素不包含自己)
$('#f').siblings().css('background','#369');

// 8. 获取父级元素
$('#f').parent().css('background','#369');

// 9. 获取先辈级元素
$('#f').parents('#all').css('border','solid 1px red');

// 10. 在父级元素中查找指定的子元素
$('#images').find('.w').css('background','#369');

3. jQuery 元素操作

• 通过 jQuery 可以操作控制元素的样式、文本、属性等

3.1 jquery 样式操作

• CSS 操作行内样式

// 1. 获取 div 的样式
$("div").css("width");
$("div").css("color");

// 2. 设置 div 的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

• 特别注意：选择器获取多个元素的信息时，获取的是第一个元素的信息，如
  • $("div").css("width") 获取的是第一个 div 的 width

3.2 类名 class 操作

• 操作样式类名

$("#div1").addClass("divClass2")			// 给 id 为 div1 的对象追加样式 divClass2
$("#div1").removeClass("divClass")			// 移除 id 为 div1 的对象的 class 名为 divClass 的样式
$("#div1").removeClass("divClass divClass2")// 移除多个样式
$("#div1").toggleClass("anotherClass")		// 重复切换 anotherClass 样式

3.3 文本操作

• html() 取出或设置 html 内容

// 取出 html 内容
var $htm = $('#div1').html();

// 设置 html 内容
$('#div1').html('<span>添加文字</span>');

• text() 取出或设置 text 内容

// 取出文本内容
var $htm = $('#div1').text();

// 设置文本内容
$('#div1').text('<span>添加文字</span>');

3.4 属性操作

• attr() 取出或设置某个属性的值

// 取出图片的地址
var Src = $('#img1').attr('src');

// 设置图片的地址和 alt 属性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

// 也可以用户设置class属性
$('#abc').attr('class','all')

// 也可以自定义 属性
$('#abc').attr('love','iloveyou')

• removeattr() 删除属性

$('#abc').removeattr('class')
$('#abc').removeattr('love')

---

此为听“北京图灵学院”的“Web 公开课”所作笔记