jQuery.01.初识

最新推荐文章于 2023-01-09 17:46:44 发布

Champion_me

最新推荐文章于 2023-01-09 17:46:44 发布

阅读量105

点赞数 5

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/Champion_me/article/details/123493666

版权

一、jQuery简介

1.什么是jQuery？

jQuery是一个优秀的JavaScript库，$符号就是jQuery的意思，jQuery不是一门语言，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

2.常见的javascript库?

  Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
  Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
  YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
  Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
  Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
  jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。

二、jQuery的特性

jQuery能做以下事情：

 HTML元素选取
 HTML元素操作
 CSS操作
 HTML事件函数
 JavaScript特效和动画
 HTML DOM遍历和修改
 AJAX
 Utilities

三、jQuery介绍

1.jQuery的使用方式

下载后引入
jQuery语句要放前面的script标签

<script src="js/jquery-3.5.1.js"></script>

这两种js文件的区别：
第一个文件：体积大，可以更改源码
第二个文件：min已经封装了，体积小，不可修改源码
在这里插入图片描述

2.用jQuery利用class取元素与修改元素样式

function a1(){
		//利用class去元素
		let div=$(".container")
		//修改元素的样式
		div.css("background","blue")
	}

3 .jQuery函数

jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：

  1）选择器（字符串）
     jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。
     
  2）DOM对象（即Node实例）
      jQuery函数将该DOM封装成jQuery对象并返回。
      
  3）HTML文本字符串
      jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
       $("<div class="one">one</div>");

  4）一个匿名函数    
      $(function(){});
      当文当加载完毕之后jQuery函数调用匿名函数。

4.jQuery对象

jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。

对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。

jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");

css是是jQuery的方法只有jQuery对象才能调用

如何将js对象变成jQuery：$(xx)

四、jQuery选择器

1.基本选择器：

1 ）所有选择器 *
2）标签选择器标签名
3） ID选择器 #id
4）类选择器 .className
5）群组选择器 .one,.two 多个选择器使用都好分隔，取并集
6）复合选择器 .one.two 多个选择器组合使用，取交集

2.层次选择器：

后代选择器 .one .two
两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
子代选择器 .one>.two
两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。

3.兄弟选择器：

下一个兄弟选择器 .one+.two
两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
之后所有子代选择器 .one~.two
两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

4.过滤选择器

selector:first 获取所有已选择到的元素中的第一个元素
selector:last 获取所有已选择到的元素中的最后一个元素
selector:even 获取所有已选择到的元素中的索引为偶数的元素
selector:odd 获取所有已选择到的元素中的索引为奇数的元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素
selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素
selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素
selector:header 获取所有已选择到的元素中的标题元素(h1~h6)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background: blue;
            color: white;
        }

        .bb{
            background: green;
            color: orange;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
    <table border>
        <tr>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>商品编号</td>
            <td>商品描述</td>
        </tr>
        <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
            <tr>
            <td>无敌大苹果🍍</td>
            <td>$99.0</td>
            <td>10001</td>
            <td>无敌好吃，无敌棒棒的大西瓜</td>
        </tr>
    </table>
    <script>
        //第一个
        //$("tr").first().addClass("aa");
        //最后一个
        //$("tr").last().addClass("aa");

        //奇数
        $("tr:gt(0):odd").addClass("aa")
        //偶数
        $("tr:gt(0):even").addClass("bb")

        // $("tr:gt(1):lt(3)").addClass("bb")
    </script>
</body>
</html>