jquary

和蔼的阿木木o

已于 2022-09-02 11:19:33 修改

阅读量885

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

于 2022-08-30 19:28:26 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/126609543

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

什么是jquary

jQuery 是一个 JavaScript 函数库。

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

jQuery 库包含以下功能：

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

jQuery的特点

轻量级：经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB

链式语法 ：$("p.surprise").addClass("ohmy").show("slow");
CSS 1-3 选择器：支持CSS选择器选定DOM对象
跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+

简单：较其它JS库更容易入门，中、英文档很齐全
易扩展： JQuery UI 、 JQuery FX –已经有很完善的基于JQuery的用户界面库和网页特效库

“写的更少，做的更多” 的轻量级 JavaScript 库。

jQuery对象与DOM对象转换

定义DOM对象
JavaScript方式
var id=document.getElementById(“id”);

jQuery方式
var $id=$(“#id”);

说明：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象

jQuery对象转换成DOM对象

jquery对象[索引]

jquery对象.get(索引)

var $id=$(“.d”); 得到一个jQuery数组对象$id
var id=$id[0]; 得到数组中的第一个DOM对象

另外也可以使用：
var id=$id.get(0);

Dom对象转换为jQuery对象

$(dom对象)
var id=document.getElementById(“id”);
var $id=$(id);

在jQuery库中，$就是jQuery的一个简写形式。
如：
$(“#id”)
等价于
jQuery(“#id”)

在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，以免在同时使用JavaScript和jQuery时发生冲突。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $( selector ). action ()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件/入口

<script>
$( document ) . ready ( function () { 
 
   //  开始写 jQuery 代码... 
 
}) ;

//简写
$( function () { 
 
   //  开始写 jQuery 代码... 
 
}) ;
</script>

JavaScript 入口函数:

窗户 .onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:$("p")

实例

用户点击按钮后，所有 <p> 元素都隐藏：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

#id 选择器

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

</script>

兄弟选择器

$("E+F")
$("E").next() 紧邻E选择器后的那一个兄弟选择器

$("E").next("F") 紧邻E选择器后的那一个F兄弟选择器

$("E~F")
$("E").nextAll() E选择器后的所有的兄弟选择器

$("E").nextAll("F") E选择器后的所有F兄弟选择器

往前查找
$("E").prev() 紧邻E选择器的上一个兄弟选择器

$("E").prev("F") 紧邻E选择器的上一个F兄弟选择器

$("E").prevAll() E选择器前的所有的兄弟选择器

$("E").prevAll("F") E选择器前的所有F兄弟选择器

选择其他兄弟
$("E").siblings() E选择器的所有的其他兄弟选择器

$("E").siblings(”F“) E选择器的所有的其他F兄弟选择器

父子选择器

$("E F")
$("E").find("F") 查找E选择器里所有的F选择器

$("E > F")
$("E").children() 查找E选择器里的所有的直接子元素

$("E").children(”F“) 查找E选择器里的所有的直接子元素F

查找父元素
$("E").parent() 查找E选择器的直接父元素

$("E").parent(”F“) 查找E选择器的直接父元素F

$("E").parents() 查找E选择器的所有的包含框父元素

$("E").parents(”F“) 查找E选择器的所有的包含框父元素F

<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js "></script>
<script>
    // var lis = document.querySelectorAll(".list li");
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].style.color = "blue";
    // }


    $(document).ready(function () {

        // $(".list li").css("color", "red")

        // $(".on + li").css("color", "red");
        // $(".on").next("li").css("color", "#00f")
        // $(".on").prev("li").css("color", "#00f")

        // $(".on ~ li").css("color", "red");
        // $(".on").nextAll().css("color", "#00f")
        // $(".on").nextAll("li").css("color", "#00f")

        // $(".on").prevAll("li").css("color", "#00f")


        // console.log($(".on"));
        $(".list li").click(function () {
            // console.log(this);//dom对象
            // $(this).css("color", "red");//给当前的li添加样式
            // $(this).nextAll("li").css("color", "");//去掉后面li的兄弟的样式
            // $(this).prevAll("li").css("color", "");//去掉前面li的兄弟的样式

            // $(this).css("color", "red");
            // $(this).siblings("li").css("color", "");//去掉前面与后面的所有li兄弟的样式

            $(this).css("color", "red").siblings("li").css("color", "");//链式写法
        });

    });


    // 紧邻E选择器后的那一个兄弟选择器F
    // $("E + F")
    // $("E").next("F")

    // E选择器后的所有的兄弟选择器F
    // $("E ~ F")
    // $("E").nextAll("F")


    // 紧邻E选择器的上一个兄弟选择器F
    // $("E").prev("F")

    // E选择器前的所有的兄弟选择器F
    // $("E").prevAll("F")

    // siblings()  查找除了自身之外的其他兄都   nextAll + prevAll()

</script>

jQuery基本选择器

jQuery层次选择器

jQuery过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

:nth-child()选择器详细功能描述:
:nth-child(even)能选择每个父元素下的索引值是偶数的元素
:nth-child(odd)选择出每个父元素下的索引值是奇数的元素
:nth-child(2)选取每个父元素下的索引值等于2的元素
:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

表单对象属性选择器

表单选择器

特殊选择器

this是JavaScript中的关键字，指的是当前的上下文对象。在js中this是动态的，可以通过call(),apply()等方法改变指向。

在jquery中需要把this加工成jquery对象。
$this=$(this)

this表示当前的上下文对象是一个html的DOM对象，可以调用html对象所拥有的属性和方法。

$(this)代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性。

选择器中的注意事项

特殊符号的处理
“.”、”#”、”(“、”]”

示例：
   <div id=“id#b”>www.baidu.com</div>
   <div id=“id[1]”>hello</div>

如果写成：
   $(“#id#b”)和$(“#id[1]”)程序就会出错

正确的写法：使用转义符\\将特殊符号转义
   $(“#id\\#b”)
   $(“#id\\[1\\]”)

特殊选择器

this是JavaScript中的关键字，指的是当前的上下文对象。在js中this是动态的，可以通过call(),apply()等方法改变指向。

在jquery中需要把this加工成jquery对象。
$this=$(this)

this表示当前的上下文对象是一个html的DOM对象，可以调用html对象所拥有的属性和方法。

$(this)代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性。