JQuery超详细快速入门详解(一)

清疚 2023-02-24 08:34 137阅读 0赞

**目录**

一.JQ-简述及引入

二 .JQ:JS和JQ元素对象互转

三. JQ-页面加载完成时

四.JQ-基本选择器

五.JQ-动画效果

--------------------

# 一.**JQ-简述及引入** #

JQuery是JavaScript的框架。

FileUtils是原生IO的框架

使用<script src=””/>引入

引入成功：谷歌F12，控制台无报错

引入失败：谷歌F12，控制台有报错 （404-找不到资源）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70][]

# 二 .**JQ:JS和JQ元素对象互转** #

> JS元素对象，只能调用JS的属性和方法
> 
> JQ元素对象，只能调用JQ的属性和方法
> 
> JS和JQ元素对象，属性和方法不能通用。
> 
> 开发中：JS和JQ元素对象 经常会进行相互转换

>  *  开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。
> 
> 格式： **js****元素****对象=****jQuery元素对象\[****0****\]****;**

>  *  开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；
>  *  格式： **jQuery****元素****对象=$(****j****s****元素对象)****;**

代码:

<script>
            function run1(){
                //JS:获取元素，获取元素innerHTML
                var x1 = document.getElementById("xxx");
    //            alert(x1.innerHTML);
                //JS--->JQ
                alert(  $(x1).html()   );
    
                //JQ：获取元素，获取元素内容体  html()
                var x2 = $("#xxx");
    //            alert(x2.html());
                //JQ--->JS
                alert(  x2[0].innerHTML  );
            }
        </script>
    </head>
    <body>
        <span id="xxx">今天我的同桌是小煌同学</span>
        <input type="button" value="点我获取span元素内容体" onclick="run1()"/>
    </body>

注意：此方式仅适用于 元素（标签）对象转换。

# 三. **JQ-页面加载完成时** #

JS：onload 页面加载完成时

<script>
        function run1(){
            alert("run1");
        }
        function run2(){
            alert("run2");
        }
        function run3(){
            alert("run3");
        }
        $(function () {
            //页面加载完成时要执行的代码
            run1();
            run2();
        });
        $(function () {
            //追加
            run3();
        });
        //其他写法：
        $(document).ready(function () {
            
        });
    </script>

# 四.JQ-基本选择器 #

*  **ID选择器     $("\#id值")**
 *  **元素选择器   $("标签名")**
 *  **类选择器     $(".类名")**

<script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            $(function(){
                //页面加载完成时，获取对应的标签对象
                //获取id为r01的标签对象
                var x1 = $("#r01");
    //            alert(x1[0].value);
                //获取标签名为input的标签对象
                var arr2 = $("input");//jq数组
                //alert(arr2.size());
                //获取class属性值为hehe的标签对象
                var arr3 = $(".hehe");//jq数组
                alert(arr3.size());
            });
        </script>
    </head>
    <body>
        <input type="radio" name="hobby" value="敲代码" id="r01"/>
        <input type="radio" name="hobby" value="调试bug" class="hehe"/>
        <input type="radio" name="hobby" value="谈需求" class="hehe"/>
    </body>

# 五.JQ-动画效果 #

收展动画：

<script>
            //动画效果：
            //【可选】参数1：speed  动画效果的持续时间 ，毫秒
            //【可选】参数2：callback: 回调函数。   某个动作执行完毕后，回来调用的函数
            //展示
            function run1(){
                $("#d1").slideDown(1000);
            }
            //隐藏
            function run2(){
                /*$("#d1").hide(1000,function () {
                    alert("隐藏成功");
                });*/
                $("#d1").slideUp(1000);
            }
            //切换显示/隐藏
            function run3(){
                $("#d1").slideToggle(1000);
            }
        </script>
    
    </head>
    <body>
        <div id="d1"></div>
        <input type="button" value="展示" onclick="run1()" />
        <input type="button" value="隐藏" onclick="run2()" />
        <input type="button" value="切换显示/隐藏" onclick="run3()" />
    </body>

自定义动画：

<style>
            #d1{
                background-color:lightskyblue;
                width:300px;
                height:300px;
            }
        </style>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
    
            function run1(){
                $("#d1").animate({width:"+=700px",height:"-=150px",marginLeft:"+=50px",marginTop:"+=100px"},{duration:"500"});
            }
     
        </script>
    
    </head>
    <body>
        <input type="button" value="展示" onclick="run1()" />
        <hr/>
        <div id="d1"></div>
    
    </body>

**精彩待续,时刻关注下篇发布~~期待你再次阅读~~**

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

> **注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70]: /images/20230209/a7c71a05882a43efa3c6e2737d8e556f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 idea部署Tomcat详解（超详细新手入门）

> javaWeb学习笔记记录文章目录 1、创建Web项目 2、配置Tomcat Tomcat控制台乱码问题我是用的是2021专业版idea编辑

淩亂°似流年/ 2023年09月23日 13:40/ 0 赞/ 51 阅读

相关超详细 JSP 快速入门详解干货 (八)

目录 JSP 一.JSP简述&和HTML区别二.JSP原理三.JSP基本语法 1.脚本元素 2.脚本表达式（了解） 3.JSP注释四.JSP指令

た入场券/ 2023年03月01日 13:45/ 0 赞/ 6 阅读

相关 JQuery_超详细重点详解(三)

这一篇让我们继上篇详解~ 可直接点下方链接跳转: [JQuery超详细快速入门详解(一) -<----点击学习][JQuery_ -_----] [JQuery\_超详细

淩亂°似流年/ 2023年02月25日 08:58/ 0 赞/ 1 阅读

相关 JQuery超详细快速入门详解(一)

目录一.JQ-简述及引入二 .JQ:JS和JQ元素对象互转三. JQ-页面加载完成时四.JQ-基本选择器五.JQ-动画效果 --------

清疚/ 2023年02月24日 08:34/ 0 赞/ 138 阅读

相关超详细快速入门JavaScript详解(二)

今天让我们来继续一起探讨JavaScript吧, 话不多说,开货,滴滴~~~ 目录一. JS运算符 1. 比较运算符 2.特殊情况二.JS函数/方法

小鱼儿/ 2023年02月21日 09:25/ 0 赞/ 3 阅读

相关 JavaScript之MockJS快速入门(超详细)

什么是MockJS > 在前后端分离的开发环境中，前端同学需要等待后端同学给出接口及接口文档之后，才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发，前端同

一时失言乱红尘/ 2022年12月11日 07:57/ 0 赞/ 463 阅读

相关 Mybatis 框架快速入门（超详细）

目录 MyBatis 框架概述 JDBC 编程的分析 jdbc 程序的回顾 jdbc 问题分析 Mybatis 框架快速入门

逃离我推掉我的手/ 2022年10月28日 14:27/ 0 赞/ 264 阅读

相关 ❤ 超强、超详细 | Redis入门详解

文章目录一、Nosql与Redis概述二、Redis6安装与使用三、常用五大数据类型四、Redis6配置文件

约定不等于承诺〃/ 2022年09月10日 10:08/ 0 赞/ 278 阅读

相关 webservice快速入门详细学习一

一直对webservice一知半解，总感觉没有彻底的弄清楚，故此，博主这里再详细介绍下：通过使用 Web Services，您的应用程序可以向全世界发布信息，或提供某项功能

电玩女神/ 2022年05月15日 08:26/ 0 赞/ 218 阅读

相关 jQuery EasyUI详细入门学习一

> 前言：当你看到这篇文章的时候，首先，你需要有一定的javascript与jquery的基础，要不你真的是不明白的。所以请先学习javaCript与html等基础知识，然后

小咪咪/ 2022年04月14日 06:06/ 0 赞/ 297 阅读