[Web 前端] 026 jQuery 初探

1. jQuery 简介

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

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

    • 节点操作
    • 元素操作
    • 事件绑定
    • ajax 操作
  • jQuery 还解决了大多数的兼容性问题

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

    • 1.x 系列兼容低版本的浏览器
    • 2.x3.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") 获取的是第一个 divwidth

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

上一篇:Mac怎么快速创建便签和发送附件的邮件


下一篇:jQuery入门、jQuery选择器、jQuery操作