jQuery基础整理1

Devil
216 阅读3分钟

jQuery

  • jQuery是一个高效、精简并且功能丰富的JavaScript工具库
  • 是一个非常好用的JavaScript的库，它对原生JavaScript中存在的各种兼容问题、复杂操作进行了大量的封装简化，提供了方便阅读的API。

jQuery简介

  • 创始人：John Resig
  • 2006年1月，jQuery正式发布
  • query本身是选择的意思，主要对JavaScript中的选择元素的方法进行了大量的优化。

版本发展

  • 1.x: 兼容IE6/7/8，是工作中最常使用的。
  • 2.x: 不兼容IE6/7/8，多用于jQuery官方调整bug使用。
  • 3.x: 不兼容IE6/7/8，只能在高版本浏览器中使用，是现在jQuery官方主要的维护升级的版本。

下载网站

API应用手册

  • 使用 jQuery 过程，可以参考 API 应用手册
  • 百度：jQuery中文文档

jQuery体验

  • jQuery 确实极大的简化了 DOM 操作，让编程变得更加简单高效。

jQuery获取元素

  • 演示代码
<div class="box"></div>
// 之前使用的DOM获取元素的方法
// var box = document.getElementsByClassName("box");
var box = document.getElementsByTagName("div");

// jQuery中获取元素
$(".box");
$("#box");

jQuery获取和设置css样式

  • 演示代码
// 获取css样式，并设置
// 1. 获取css样式
console.log($(".box").css("width"));
// 2. 设置css样式的值, 可以不写单位
console.log($(".box").css("width",200));

jQuery设置事件

  • 演示代码
// 设置事件简化,jQuery中有自己封装的click函数
$(".box").click(function (){
    $(this).css("background-color","skyblue");
});

jQuery的运动方法

  • 演示代码
// 运动方法
// jQuery中的运动方法，并不是匀速的那么简单
// 相比于之前自己封装的animate函数，只能匀速运动，jQuery的显得更加强大
$(".box").animate({"width":500},1000);

$()方法

  • 在 DOM 操作中，基本都是从获取元素开始的。jQuery 中封装了一个更加强大的获取元素方法$()
  • 在 jQuery 中，只有一个全局变量 $,这是 jQuery 的一大特点，避免了全局变量的污染。
  • 最开始变量不叫做 $，叫做 jQuery() 方法，在库中两个名字是并存的，都可以使用。
// 可以不给width的值添加px单位
$(".box").css("width",200);
jQuery(".box").css("width",200);
  • 经典错误：$ is no defined.
    • 一般出现这种报错的原因：jQuery的包没有引入 或 引用错误

jQuery对象

  • 通过$()方法获取的内容叫做：jQuery对象
  • 其内部封装了大量的属性和方法。
    • 比如：css()、html()和animate()等方法都是jQuery对象的方法。
  • 通过$()方法获取的元素是一组元素，进行操作时是批量操作。

jQuery对象和原生js对象

  • jQuery对象，只能使用jQuery对象的方法，不能使用原生js元素对象的方法。
  • 原生js对象也不能使用jQuery的方法。
// 1. jquery对象只能调用自己的方法
$(".box").css("background-color","red");
// 使用原生js方法
// 报错：Cannot set property 'backgroundColor' of undefined
$(".box").style.backgroundColor = "red";

// 2. 原生对象只能调用自己的原生方法
// 原生获取元素的方式
var box = document.getElementsByClassName("box");
// 调用原生的方法: 注意获取的是一个数组的时候，直接添加样式就会出错
box[0].style.backgroundColor = "red";

// 原生使用jQuery方法
// 报错：box.css is not a function
box.css("background-color","red");
  • 原生js只能单个(注意下标)进行操作，jQuery进行的操作是批量操作。
  • jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的jQuery 的方法和属性。

jQuery对象中原生js对象的个数

$().length

// 获取jQuery中原生js对象的个数
console.log($(".box p").length);

$().size()

console.log($(".box p").size());

互相转换

jQuery转原生

  • 直接利用数组下标方式，得到jQuery封装的原生对象。
// jQuery和原生对象的转换
// 1.jQuery转原生: 通过数组下标的方式
$(".box p")[0].style.backgroundColor = "red";

原生转jQuery

  • 将原生对象用$()方法包裹即可。
// 2.原生转jQuery: 原生对象用$()方法包裹即可
var box = document.getElementsByClassName("box");
$(box).css("background-color","skyblue");

jQuery选择器

css2.1和css3选择器

  • 参数：必须是字符串格式的选择器。
// 基础选择器(4种)
// id选择器、类选择器、标签选择器、*
$("*");
$("p");
$(".box");
$("#demo");
// 高级选择器（5种）
// 伪类选择器、属性选择器、伪元素选择器
// 兄弟选择器、子选择器
$(".box p");
// 表单对象的属性
$("input:disabled").css("background-color","pink");
$("input:enabled").css("background-color","yellow");
// 表单:所有的表单，不论type类型是什么，都可以被选中
$(":input").css("background-color","gray");

筛选选择器(是在原有选中的内容基础上，再进行筛选的)

  • 也叫过滤选择器，jQuery中新增的自己的选择器。
  • 用法：
    • 在基础选择器后面增加一些筛选单词，筛选出前面选择器选中内容中的一部分。
    • 或者可以作为高级选择器的一部分。
  • 常用
$(":first")          第一个
$(":last")           最后一个
$(":eq(index)")      下标为 index 的项
$(":gt(index)")      大于下标为 index 的项
$(":lt(index)")      小于下标为 index 的项
$(":odd")            下标为奇数的项
$(":even")           下标为偶数的项
$(":not(selector)")  去除所有与给定选择器匹配的元素
  • 演示代码
<div class="box">
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</div>
<script src="js/jquery.min.js"></script>
<script>
// 筛选选择器也叫过滤选择器，jQuery中新增的自己的选择器。
// $(":first")          第一个
$(".box p:first").html("Hello!");

// $(":last")           最后一个
$(".box p:last").css("background-color","skyblue");

// $(":eq(index)")      下标为 index 的项
$(".box p:eq(3)").css("background-color","pink");

// $(":gt(index)")      大于下标为 index 的项
$(".box p:gt(3)").css("background-color","yellow");

// $(":lt(index)")      小于下标为 index 的项
$(".box p:lt(3)").css("background-color","green");

// $(":odd")            下标为奇数的项
$(".box p:odd").css("background-color","green");

// $(":even")           下标为偶数的项
$(".box p:even").css("background-color","yellow");

// $(":not(selector)")  去除所有与给定选择器匹配的元素
$(".box p:not(:eq(3))").css("background-color","green");
$(".box p:not(.para)").css("background-color","green");

筛选方法

  • 也叫过滤方法，jQuery中除了用选择器选择元素，jQuery对象内还封装了一些对应的筛选方法。
  • 常用
$("p").first()
$("p").last()
$("p").eq(3)
  • 演示代码
// 筛选方法
// $("p").first()
$(".box p").first().html("第一个！");
// $("p").last()
$(".box p").last().html("最后一个！");
// $("p").eq(3)
$(".box p").eq(3).html("第四个！");

案例

  • 案例：比较原生 js 方法和 jQuery 方法制作表格的隔行变色。
  • 代码展示
// 比较原生 js 方法和 jQuery 方法制作表格的隔行变色。
// 1. 原生js
var trs = document.getElementsByTagName("tr");
for(let i = 0;i < trs.length; i+=2){
    trs[i].style.backgroundColor = "green";
}

// 2. jQuery方法
$("tr:even").css("background-color","yellow");
  • 比较后发现：使用jQuery方法，思路比较简单，也可以帮助代码极大的简化。(推荐：jQuery方法)
avatar
文章
阅读
粉丝