jquery的概念

　　js query

　　jquery库

　　封装了大量js，封装js的入口函数、兼容性问题、DOM操作、事件、ajax

使用jquery

　　下载包

　　引用

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

<script>

            //入口函数

            $(function(){

                //DOM操作三步走：事件源 事件 事件驱动 

                //选择器 就是来获取事件源的

                id

                    $('#box')

                class

                    $('.box')

                标签

                    $('div')

                //事件和事件驱动 在click方法中的函数称为回调函数

                $('#box').click(function(){

                    //对样式的操作

                    .css()方法

                })

            });

        </script>

jquery的文件讲解

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .wrap{

            width: 100px;

            height: 100px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div id="box" class="wrap">qing</div>

    <!--1导入模块，在前端中一个js文件是模块，一个css也可以是一个模块，一个html/png/mp3-->

    <script type="text/javascript" src="./jquery.js"></script>

    <script>

        //jquery内部的aip 99%都是方法

        console.log(jQuery)

        console.log($("#box"))

        //三步走

        $("#box").click(function () {

            //千万不要用js的属性和方法 js调用js的属性和方法 jquery对象调用的是jquery的对象和方法

            $(".wrap").css(

                {

                    "backgroundColor" :"yellow",

                    width:"300px"

                }

            )

        })

    </script>

</body>

</html>

jquery的入口函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

    <div id="box">

    </div>

    <script>

        //1.入口函数 不用等待图片资源加载完成之后就可以调用 它没有事件覆盖现象

        // $(document).ready(function () {

        //     //回调函数

        //     console.log($("#box"))

        // })

        $(function () {

            console.log($("box"))

        });

        $(function () {

        });

    </script>

</body>

</html>

jquery的动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            background-color: red;

            /*display: none;*/

        }

    </style>

</head>

<body>

    <button>动画</button>

    <button>动画</button>

    <button>动画</button>

    <button>动画</button>

    <button>动画</button>

    <button>动画</button>

    <div id="box"></div>

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

    <script>

        $(function () {

            console.log($("button"));

            var isShow = true;

            $("button").click(function () {

                //隐藏，显示  第二个元素是隐藏或显示后执行的函数

                // $("#box").hide(2000);

                // $("#box").show(2000,function () {

                //     alert(22222);

                // })

                //显示  淡入淡出

                // $("#box").fadeIn(5000);

                // $("#box").fadeOut(5000);

                if(isShow){

                    $("#box").stop().slideUp(1000);

                    isShow = false;

                }else {

                    $("#box").stop().slideDown(1000);

                    isShow = true;

                }

            })

        })

    </script>

</body>

</html>

jQuery基础知识1的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. JQuery基础知识（1）

    JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...

  3. JQuery基础知识（2）

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  4. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  5. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  6. 【JQuery基础知识/statusCode(状态码)】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  7. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  8. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  9. jQuery基础知识准备

    一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...

  10. Jquery基础知识；

    1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...

随机推荐

  1. 12、OpenCV实现图像的直方图处理

    1.直方图 一幅图像由不同灰度值的像素组成,图像中灰度的分布情况是该图像的一个重要特征.图像的灰度直方图就描述了图像中灰度分布情况,能够很直观的展示出图像中各个灰度级所占的多少.图像的灰度直方图是灰度 ...

  2. string中的erase()函数

    erase()是对string类型的字符串进行删除元素操作的函数 1.erase(int index) 删除下标从index开始直到字符串结尾的元素 1 string s = "123215 ...

  3. C#中的System.Web.HttpUtility.UrlEncode转码问题

    最近需要与JAVA程序对接口,其中遇到的URL转码问题: Java中URL编码所用的 URLEncoder.encode 产生的字符是大写且英文'(',')'是分别转成'%28'和 '%29' 而C# ...

  4. SRID (空间引用识别号, 坐标系)【转】

    SRID (空间引用识别号, 坐标系)-云栖社区-阿里云 Spatial Reference List -- Spatial Reference Chapter 8. PostGIS Referenc ...

  5. Spring Boot集成redis完整实例

    添加依赖: (Spring Data Redis) 启动redis: 配置文件中进行配置: redis基本使用思路: redis中不存在就查询数据库然后存入redis: 查看日志:

  6. 手动编译ts的经过

    动机 以前写ts或者es6,都是用在脚手架搭建的项目中,比如vue和react,当时当我识图写一个ts的demo的,我还要创建一个完整的vue或者react项目?明显不合适,那就要研究一下如何手动搭建 ...

  7. Codeforces Round #222 (Div. 1) (ABCDE)

    377A Maze 大意: 给定棋盘, 保证初始所有白格连通, 求将$k$个白格变为黑格, 使得白格仍然连通. $dfs$回溯时删除即可. #include <iostream> #inc ...

  8. MyBatis Generator 自动生成的POJO对象的使用（二）

    四.Example Class使用说明 示例类指定如何构建动态where子句. 表中的每个非BLOB列都可以选择包含在where子句中. 示例是演示此类用法的最佳方法. 示例类可用于生成几乎无限制的w ...

  9. MySQL 索引机制

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  10. c# 事件 +=和-=有什么区别

    +=就是發生新事件的同時通知你: -=就是發生新事件的同時不通知你: