JavaScript jQuery讲解

1.什么是jQuery

🎉jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改

🎉2.为什么要使用jQuery

目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。
很多大公司都在使用 jQuery
Google
Microsoft
IBM
Netflix

jQuery的引入方式

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

</script>

✨那就然我们写一个jQuery最基础的代码吧

 $(document).ready(function (){
            alert("弹出")
        })

✨这就是一串很简单的jQuery的代码了，他是什么意思呢，首先美元符号$表示选择器，选中了document(所有文本文档)就是所有的代码，然后ready(准备)说有的代码准备弹窗。

✨那我们在演示一个串代码吧。
JS代码演示

   window.onload=function (){
		var p2=getElementById("p2")
		p2.style.color="red"
	}
	window.onload=function(){
	var ps=document.getElementsByTagName("p")
	for (i=0;i<=ps.length;i++){
		  ps[i].style.backgroundColor="green";
		}
	}
	//HTML部分
   //<p name="pNanme">1</p>
    //<p id="p2">2</p>
    //<p>3</p>
    //<p name="pName" >4</p>

jQuery代码演示

$(function)(){
	$("p").css("backgroundColor","green")
}

我们不难发现出他们两个是都是然所有的P标签的背景颜色都变成绿色
但是JS得代码量很多，而jQuery的代码量才3行所以这就是我们也可以理解为jQuery是JS得偷懒版😁

那我们来看看jQuey的选择器吧，其实jQuey的选择器也是非常简单的它和css的选择器非常相似就比如$("p")意思就是选择了我的HTML里面的所有P标签然后.css("backgroundColor","green")需要做的操作改变所有P标签的背景颜色。

二、接下来就然我们来看看jQuery有哪些选择器吧。

//jQuery选择器
$("选择器")

后面还有很多选择器到后面我会给大家一一演示的

示例

• • 1.什么是jQuery
  • • 🎉2.为什么要使用jQuery
  • 示例1
  • 示例2
  • 示例3
  • 示例4
  • 方式一
  • 方式二
  • 其他的选择器（补充）

示例1

🎇标签选择器的用法
css代码

td{
   border: 1px solid black;
}

HTML代码

<table>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
        <td>列4</td>
        <td>列5</td>
    </tr>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
        <td>列4</td>
        <td>列5</td>
    </tr>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
        <td>列4</td>
        <td>列5</td>
    </tr>
    <tr>
    <td>列1</td>
    <td>列2</td>
    <td>列3</td>
    <td>列4</td>
    <td>列5</td>
</tr>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
        <td>列4</td>
        <td>列5</td>
    </tr>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
        <td>列4</td>
        <td>列5</td>
    </tr>

</table>

jQuery代码

$(function){
	$("tr":odd).css(""backgroundColor","red"")
}

运行结果

🎊代码意思呢就是选中了所有的tr元素，然所有的列表行 中的偶数
把背景图编程红色。当然啦有偶数自然也有奇数我们只需要把odd改成even就好啦😉
这就是奇数的代码啦

 $(function (){//奇数
            $("tr:even").css("backgroundColor","pink")
        })

运行结果为：

示例2

类选择器

<p name="p1">1</p>
<p class="p2">2</p>
<p id="p3">3</p>

$(function {
	$(".p2").css("backgroundColor"，"red")
})

🎉将我取的class类名的元素的背景颜色变成红色。这个选择器可以准确的选中要改变的元素。类选择器可以重复命名，就是说有两个元素都class类名都是一样的话那么他们两个的背景颜色都会转变为红色。

示例3

ID选择器

<p name="p1">1</p>
<p class="p2">2</p>
<p id="p3">3</p>

 $("#p3").css("backgroundColor","pink")

🎉id选择器和类选择器其实都差不多，他们的功能都是将，给元素起好的名字进行操作，但他们不同的一点事id选择器太不可以重复取名，他在整个html代码里面只能是唯一的，否者就好报错，就相当于和平精英每个玩家都有着属于自己唯一的
id名称如果和别的玩家的id重复了就不行了吗。

示例4

是用选择器实现一个点击点击显示，再次点击隐藏的效果代码如下。部分展示

<p id="f1">什么是受益人</p>
<p class="dd">受益人是由投保人或者被保险人在保险合同</p>

       $(function (){
           $(".dd").hide()
           $("#f1").click(function (){
               $(this).css("backgroundColor","pink")
               $(this).next().show();
           })
       })
       $(function (){
           $(".dd").click(function (){
               $(".dd").hide()
           })
       })
       

这里我们可以看到一些新的语法，hide(隐藏)，click(点击)执行function函数里面的操作选择this(引用的是全局象)$(this).css("backgroundColor","pink"),$(this).next().show();属于链式操作操作一连串的给连起来。
专业解释：
jQuery链式操作是指将多个jQuery方法调用链接在一起，每个方法的返回值都是一个jQuery对象，可以连续调用其他的jQuery方法。这种方式可以简化代码，提高代码的可读性。

点击显示
运行结果

再次点击隐藏

在script中写HTML

方式一

普通方式，html代码

<div class="ddct" style="width: 100px;height: 55px;background-color: blueviolet"></div>
<input type="button" value="普通方法" class="bbc" onclick="bbchs()">

JS代码

     function bbchs(){
               var bbc=document.getElementsByClassName("ddct")[0]
               bbc.innerHTML="script普通方法"
           }

方式二

iQuery代码

<input type="button" value="jQuery方法" class="yyt">
<div class="ttaeg" style="width: 50px;height: 50px;background-color: aqua"></div>

  $(function (){
           $(".yyt").click(function (){
               var ttk=document.getElementsByClassName("ttaeg")[0]
               ttk.innerHTML="jQuery方法"
           })
       })

🍧他们两个属于两种方式，但是结果都是一样的，它们只是方式变了但是结果都是一致的。
代码讲解：html中有div元素，还有一个按钮，在按钮中我们设置一个点击事件，当我点击我的按钮是他会执行JS的函数事件，第一步获取到div的类名因为class类名会返回一个数组，所以要在最后面标识一个0,0是数组的下标。然后，在用,innerHTML的代码写入内容。

运行结果为

其他的选择器（补充）

🍕 1、属性选择器（Attribute Selector）：通过元素的属性来选择元素，比如$(“[name=‘myName’]”)表示选择name属性值为myName的元素

🍔2、后代选择器（Descendant Selector）：通过上级元素的选择器来选择下级元素，比如$(“.myClass span”)表示选择class为myClass的元素内的所有元素。

🌭3、子元素选择器（Child Selector）：通过上级元素的选择器来选择直接下级元素，比如$(“.myClass > span”)表示选择class为myClass的元素下的所有直接子级元素。

🍟4、过滤选择器（Filter Selector）：根据指定条件来选择元素，比如:first表示选择第一个元素，:last表示选择最后一个元素，:even表示选择偶数位置的元素，:odd表示选择奇数位置的元素。

此外，还有许多其他选择器，比如选择可见元素、选择隐藏元素、选择表单元素等。可以根据具体需求选择合适的选择器来选取元素。

。