JQuery

最新推荐文章于 2023-03-31 21:34:10 发布
最新推荐文章于 2023-03-31 21:34:10 发布
阅读量386 收藏
点赞数
分类专栏： 框架 文章标签： javascript 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51526974/article/details/123297167
版权

JQuery大全集

JQuery的安装

idea上JQuery的安装

			<script src="https://code.jquery.com/jquery-3.3.1.min.js">

然后Alt + enter 快速 download

或者在Settings中Libraries中搜索下载也可以

在引入JQuery后注意JS代码不要写在JQuery引入中。
还是写在 <script type="text/javascript">中

在这里插入图片描述
出现JQuery就成功了

JQuery核心

$符号在JQuery中代表对JQuery对象的引用，“JQuery”是核心对象，通过该对象可以获取JQuery方法，只有JQuery对象才能调用JQuery方法。

  $<==>JQuery

Dom对象和JQuery包装集对象的区别

明确Dom对象和JQuery包装集的概念。原始的Dom对象只有DOM接口提供的方法和属性，通过
JS代码获取的对象都是Dom对象，而通过JQuery获取的对象是JQuery包装集对象。
简称JQuery对象，只有JQuery对象才能使用JQuery提供的方法。

Dom对象

        let div = document.getElementById('testDiv');

JQuery包装集

可以说是Dom对象的扩充，在JQuery的世界中，将所有的对象，无论是一个还是一组，都封装成一个JQuery包装集。

       let JQueryObject = $('#testDiv');

JQuery包装集将Dom对象的方法 document.getElementById()等方法进行封装。

<body>
        <div id="FirstDiv">FirstDiv</div>
        <div id="LastDiv">LastDiv</div>
        <div id="div">DIV</div>
    </body >
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
        /*通过Dom对象获取div的元素对象*/
        let div = document.getElementById('FirstDiv').value;
        console.log(div);

        /*通过JQuery的方式获取div的元素对象*/
        let div1 = $('LastDiv').value;
        console.log(div1);

        /*将Dom对象转换为JQuery对象*/
        let divDom = document.getElementById('div');
        let DomToJQuery = $(divDom);

        /*将JQuery对象转换为Dom对象*/
        let divjQuery = $('div');
        let JQueryToDom = divjQuery[0];
    </script>

Dom对象和JQuery包装集互相转换的方法如上

JQuery选择器

基础选择器

和使用JS操作DOM一样，获取文档中的节点对象是很频繁的一个事情，在JQuery中提供了简便的方式供我们查找 / 定位元素，称为JQuery选择器。只要把选择器字符传入上面的方法中就能选择不同的Dom对象并且以JQuery包装集的形式返回

选择器名称举例
id选择器#id$(’#testDiv’)选择id为testDiv的元素
元素名称选择器element$(‘div’)选择所有的DIV的元素
类选择器.class$(’.blue’)选择所有class = blue的元素
选择所有的元素*$(’*’)选择页面所有的元素
组合选择器selector1.selector2.selectorN$(’#testDiv.span.blue’)同时选中多个选择器匹配的元素

$特殊符号，在使用id选择器的时候，在元素前添加#

层次选择器

选择器名称举例
后代选择器ancestor descendant$(‘parent div’)选择id为parent的元素的所有div元素
子代选择器parent > child$(‘parent > div’)选择id为parent的直接div子元素
相邻选择器prev + next$(’.blue + img’) 选择CSS类为blue的下一个img元素
同辈选择器prev + sibling$(’.blue - img’)选择CSS类为blue的之后的img元素

表单选择器

Forms名称举例
表单选择器:input查找所有的input元素 $(‘input’),注意：会匹配所有的input，textarea，select和button元素
文本框选择器:text查找所有的文本框：$(‘text’)
密码选择器:password查找所有的密码：$(‘password’)
单选按钮选择器:radio查找所有的单选按钮 ：$(‘radio’)
复选框选择器:checkbox查找所有的复选框：$(‘checkbox’)
提交按钮选择器:submit查找所有的提交按钮：$(‘submit’)
图象域选择器:image查找所有的图象域：$(‘image’)
重置按钮选择器:reset查找所有的重置按钮：$(‘reset’)
按钮选择器button查找所有的按钮：$(‘button’)
文件域选择器:file查找所有的文件域：$(‘file’)

JQuery Dom操作

JQuery也提供了对HTML节点的操作，而且在原生JS的基础上进行了优化，使用起来更加方便
常用的从几个方面来操作：查找元素，创建节点对象，访问和设置节点对象的值。以及属性
：添加节点，删除节点，删除，修改，添加节点的CSS样式等。
注意：以下的操作方式只适用与JQuery对象

操作属性——获取，设置，移除

获取属性

方法说明举例
attr(属性名称)获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefinedattr(’checked’)
prop(属性名称)获取具有true和false两个属性的属性值prop(‘checked’)

属性的分类：
固有属性：id name class style
布尔类型属性：checked selected disabled
用户自定义属性

先设置多选框和其中的属性

<body>
        <label for="aa"></label><input type="checkbox" name="ch" checked="checked" id="aa" num="123" />第一个多选框
        <label for="bb"></label><input type="checkbox" name="ch" id="bb" num="321" />第二个多选框
    </body >

  /*先通过ID选择器获取到对应的多选框，再通过attr获取多选框的属性*/
       /*先测试固有属性*/
       let attrName = $("#aa").attr("name");
       console.log(attrName);/*返回ch*/

       let propName = $('#bb').prop('name');
       console.log(propName);/*返回ch*/

 /*测试布尔类型属性*/
       /*name=“aa” checked=“checked”  checked已经设置*/
       let attrChecked = $('#aa').attr('checked');
       console.log(attrChecked);/*返回一个checked*/

       let propChecked = $('#aa').prop('checked');
       console.log(propChecked);/*返回一个true*/

       /*name=“bb” checked未设置*/
       let attrCheck = $('#bb').attr('checked');
       console.log(attrCheck);/*返回一个undefined*/

       let propCheck = $('#bb').prop('checked');
       console.log(propCheck);/*返回一个false*/

 /*测试用户自定义属性*/
       let attrNum = $('#aa').attr('num');
       console.log(attrNum);/*123*/

       let propNum = $('#bb').prop('num');
       console.log(propNum);/*undefined*/

设置属性

            attr('属性名'，'属性值');
            prop('属性名'，'属性值');

attr()和prop()的区别

  1. 如果是固有属性，attr()和prop()都能操作
  2. 如果是自定义属性，attr()可以操作，prop()不可操作
  3. 如果布尔类型属性：
    （1）如果设置了具体的值，attr()返回具体的值，而prop()返回true
    （2）如果没设置具体的值，attr()返回undefined，而prop()返回false
 <body>
        <label for="aa"></label><input type="checkbox" name="ch" checked="checked" id="aa" num="123" />第一个多选框
        <label for="bb"></label><input type="checkbox" name="ch" id="bb" num="321" />第二个多选框
    </body >

<script type="text/javascript">
        /*设置属性*/
        /*固有属性*/
        $('#aa').attr("value","1");
        /*布尔类型属性*/
        $('#aa').attr('checked','checked');
        $('#bb').prop('checked','false');
        /*自定义属性*/
        $('#aa').attr('num','1234');
        $('#bb').prop('num','22222');/*不可操作*/
   </script>

移除属性

    removeAttr（“属性名”）

总结
如果属性的类型是布尔类型，就用prop()反之则用attr

操作元素的样式

方法说明
attr(‘class’)获取class属性的值，即样式名称
attr(‘class’,‘样式名’)修改class的值，修改样式
addClass(‘样式名’)添加样式名称
css()添加具体的样式
removeClass(class)移除样式名称

增加元素的具体样式，格式

 CSS('样式名':'样式值','样式名2':'样式值2');

当设置多个属性时，一组样式名和样式值之间用 ， 分隔。

	CSS('样式名','样式值');

       <style type="text/css">
            div{
                padding: 8px;
            }
            .blue{
                background: blue;
            }
            .larger{
                font-size: 30px;
            }
            .green{
                background: green;
            }
        </style>

    </head>
    <body>
        <h2>CSS()方法设置元素样式</h2>
        <div id="conBlue" class="blue larger">天蓝色</div>
        <div id="conRed">大红色</div>
        <div id="remove" class="blue larger">我是你爹</div>

    </body >
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        /*获取对应id的div的class属性*/
      let OraClass= $('#conBlue').attr('class');
      console.log(OraClass);/*显示为蓝色*/
      /*设置div的class属性*/
      let SetClass = $('#conBlue').attr('class','green larger');
      console.log(SetClass);/*显示为绿色*/

        let MorClass = $('conBlue').css('background-color','red');
        console.log(MorClass);/*对样式进行详细的设计*/

        let ReClass = $('conBlue').removeClass('class');
        /*移除div的class属性*/
   </script>

获取元素的内容

方法说明
html()获取元素的内容，包含html标签（非表单元素）
html(“html,内容”)设定元素的内容，包含html标签（非元素单元表）
text()获取元素的文本内容，不识别html标签（非表单元素）
text(“text内容”)设置元素的文本内容，不识别html标签（非表单元素）
val()获取元素的value值（表单元素）
val(“值”)设定元素的value值（表单元素）

表单元素

文本框text，密码框password，单选框radio 复选框checkbox，隐藏域hidden，文本域textarea

非表单元素

div，span，p等

注意val（）只能获取表单元素的value值
方法中有值，则为设置，否则为获取

 <body>
        <h2>操作元素的内容</h2>
        <div id="html"></div>
        <div id="text"></div>
        <input type="text" id="gun" name="uname" value="看看这是什么">
        <textarea id="fucking" value="我真的是你爹"></textarea>
    </body >

    <script type="text/javascript">
        /*设定元素的内容，包含html标签*/
        $('#html').html("<h2>Hello World</h2>");
        /*获取元素的内容，包含html标签*/
        let GetHtml = $('#html').html();
        console.log(GetHtml);/*我猜是整个内容的打印*/

        /*设置元素的文本内容，不包括html*/
        $('#text').text('北京');
        /*获取元素的文本内容，不包含html*/
        let GetText = $('#text').text();
        console.log(GetText);

        /*获取元素的value值*/
        let GetValue = $('#gun').val();
        console.log(GetValue);
    </script>

创建元素

在JQuery创建元素，只需要使用核心函数

             $('元素内容')
             $('<p> this is a text</>p>')

添加元素

方法说明
prepend(content)在被选元素的内部的开头插入元素或内容。被追加的content函数，可以是字符，HTML元素标记
$(content).prependTo(selector)把content元素或内容加入selector元素开头
append(content)在被选元素的内部的末尾插入元素或内容，被追加的content参数，可以是字符，HTML元素标记
$(content).appendTo(selector)把content元素或内容加入selector元素末尾
before()在元素前插入指定的元素或内容 $(selector).before(content)
after()在元素后插入指定的元素或内容$(selector).after(content)

删除元素

方法说明
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删除
empty()清空所选元素的内容
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <style type="text/css">
            .span{
                    color:white;
                    padding:8px;
                    margin: 5px;
                    float: left;
            }
            .green{
                background: green;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <h2>删除元素</h2>
        <span class="green">JQuery</span>
        <span class="blue">javase</span>
        <span class="green">http协议</span>
        <span class="blue">servlet</span>
    <div class="blue">我是你爹</div>
    </body >

    <script type="text/javascript">
        $(".blue").remove();
        $(".green").empty();
    </script>
</html>

在idea上调试时发现，empty同样清空了内容所在的样式

遍历元素

			 each()

            $(selector).each(function(index,element))
            参数function为遍历时的回调函数
            index为遍历元素的序列号，从0开始。
            element是当前的元素，此时是dom对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <style type="text/css">
            span{
                    color:white;
                    padding:8px;
                    margin: 5px;
                    float: left;
            }
            .green{
                background: green;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <span class="green">操作系统</span>
        <span class="green">计算机组成原理</span>
        <span class="green">数据结构</span>
        <span class="green">计算机网络</span>

    </body >

    <script type="text/javascript">
        $('span').each(function (index,e) {
            console.log(index + "------" + $(e).text());
        })
    </script>
</html>

ready加载事件

预加载

当界面的Dom结构加载完毕后执行
ready()类似于onload()事件
ready()事件可以写多个按照顺序执行。

/*简写版*/
        $(function(){
            console.log('执行ready加载事件');
        });


        $(document).ready(function(){
            console.log($('#p1'));
        });

Bind绑定事件

为被选的元素添加一个或多个事件处理程序。并规定事件发生时运行的函数

	$(selector).blind(eventType [, eventData],handler(eventObject));

        eventType：是一个字符串类型的事件类型，是需要绑定的事件
        [, eventData]：传递的参数：格式：（名：值，名2：值2）
        handler(eventObject)：该事件触发执行的函数

1.确定为哪些元素指定事件
获取元素
2.绑定什么事件
第一个参数：事件的类型
3.相应事件触发的执行的操作
第二个参数：函数

绑定单个事件

 $('元素').bind('事件类型',function(){

                });

直接绑定

  $('元素').事件名(function(){

                    });

绑定多个事件(为多个事件同时绑定一个函数)

  指定元素.bind('事件类型1 事件类型2.。。',function(){

                    })

指定元素.bind('事件类型',function(){}).bind('事件类型',function(){})

指定元素.bind({
                "事件类型":function(){},"事件类型":function(){}
              })

直接绑定

 指定元素.事件名(function(){}).事件名(function(){})

JQuery Ajax

== （异步，无刷新）==

异步就是不用等待服务器响应再去处理。
以烧水为例，同步是必须等水开了再去干其他的事情。而异步不用
无刷新就是进行一些操作之后，页面不会进行刷新

			JQuery调用ajax()方法
                type:请求方式GET / POST
                url:请求地址url
                async:是否异步，默认是true表示异步
                data：发送到服务器的数据
                dataType：预期服务器返回的数据类型
                contentType():设置请求头
                success:请求成功时调用此函数
                error:请求失败时调用此函数

格式

				Jquery Ajax
                    $.ajax({

                    })

运用ajax方法向本地文件请求访问并获得数据


    <script type="text/javascript">
        $.ajax({
            type:"get",
            url:"src/test.txt",
            data:{
                /*请求服务器数据*/
            },
            success:function(data){
                console.log(data);
                alert('请求成功了');
            }
        });
    </script>

一点小提示

当复制文件地址的时候

在这里插入图片描述

记得选择第三项 Path From Content Root

此时我们拿到的是数据是字符串

在这里插入图片描述
可以将字符串转化为JSON对象
通过序列化的方法

  /*将字符串序列化*/
                let obj = jQuery.parseJSON(data);
                console.log(obj);

添加以上代码，特别注意文件中的内容是否符合JSON的格式

在这里插入图片描述

关于JSON代码格式的问题可以看看这篇博客
SyntaxError: Unexpected number in JSON at position 7 at JSON.parse (＜anonymous＞)前端接收到数据，无法进入success

使用到的JSON格式校验工具上面博客也有提到

字符串和JSON格式的数据

在这里插入图片描述

$.get()

一个简单的GET请求功能用以取代复杂 . a j a x 请 求 成 功 时 可 调 用 回 调 函 数 ， 如 果 需 要 在 出 错 时 执 行 函 数 ， 请 使 用 .ajax 请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 .ajax请求成功时可调用回调函数，如果需要在出错时执行函数，请使用.ajax

1.请求一个简单的GET请求功能以取代复杂$.ajax

$.get('js/haihaihai.json');

2.请求json文件，传递参数，忽略返回值

$.get('js/haihaihai.json',{name:"xhb',age:21});

3.请求json文件，传递参数，忽略返回值

$.get('js/haihaihai.json',function(data){
console.log(data);
});

4.请求json文件，传递参数，拿到返回值，请求成功后可拿到返回值

$.get('js/haihaihai.json',{name:"xhb",age:21},function(data){
console.log(data);
});

最常用的情况是第四种，发送请求，传递参数，并拿到返回值

$.getJSON()

$.getJSON()与get方法类似，但是要求返回的数据格式必须是JSON格式的

关于JQuery的笔记到此就结束了，随着我往后的学习也会继续补充和更新新的知识，也欢迎各位在评论区或者私信指出我的错误。

炬火埋土
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
jquery-3.7.0.min.js（jQuery下载）
最新发布
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jQuery - 获得内容和属性
BishopTylaor的博客
04-11 323
获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容（包括 HTML 标记） ● val() - 设置或返回表单字段的值 $("#btn1").click(function(){ alert("Text: ...
jquery常用操作
weixin_59246157的博客
03-31 470
在上面的代码中，我们使用jQuery发送了一个POST请求到example.com，发送了一些数据，当请求成功时，会执行success函数，并将API的响应作为参数传递给它；jQuery是一个广泛使用的JavaScript库，可以简化JavaScript代码的编写，并提供了一系列常用的功能和特效，如DOM操作、事件处理、Ajax等。以上是jQuery的基本使用方法，jQuery提供了非常丰富的API，可以处理DOM操作、事件处理、Ajax等，可以根据具体的需求使用不同的API进行开发。
IDEA 载入jQuery的方法
weixin_45743799的博客
11-17 6478
使用IDEA开发java web时，页面写入了jquery代码，但是可能因为未能添加该模块，所以并不能起到作用。 那么如何添加Jquery模块呢？？？ 最简单的添加方法 1.在jsp中写入： <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 添加如上代码后，将鼠标光标放于该URL中，按...
IDEA载入jQuery的方法(一)
热门推荐
家玮老师的博客
01-18 3万+
在java web开发中，使用了jQuery后，可能因为未能添加该模块，所以不能起到作用。 最简单的添加方式就是，直接在jsp中写入： &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; 并在写入后，将鼠标光标放于该URL中，按Alt+enter，选择载入该模块。   验证是否载...
【jQuery】:password表单密码选择器
O(∩_∩)O
12-17 399
如果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。 例如，在表单中添加多个输入框元素，使用:password获取密码输入文本框元素，并修改它的边框颜色，如下图所示： 在浏览器中显示的效果： 从图中可以看出，在多个文本输入框中，使用:password选择器只能获取表单中的密码输入文本框，并使用addClass
jQuery
CJW的博客
07-28 9515
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 3954
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3313
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4146
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3623
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery1.7.2
08-28
jquery1.7.2中文文档，这是一个chw格式的中文文档，方便查询

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值