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 公开课”所作笔记

巴特西

[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 属性操作

最新文章

热门文章