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. js 判断字符串是否为JSON格式

    function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); if(typeof obj == ...

  2. 数据挖掘经典算法PrefixSpan的一个简单Python实现

    前言 用python实现了一个没有库依赖的"纯" py-based PrefixSpan算法. Github 仓库 https://github.com/Holy-Shine/Pr ...

  3. mousedown、mouseup、click事件之间的关系及执行顺序

      三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被 ...

  4. 使用派生镜像(qcow2)

    当创建的虚拟机越来越多,并且你发现好多虚拟机都是同一个操作系统,它们的区别就是安装的软件不大一样,那么你肯定会希望把他们公共的部分提取出来,只保存那些与公共部分不同的东西,这样镜像大小下去了,空间变多 ...

  5. Java注解-注解处理器、servlet3.0|乐字节

    大家好,我是乐字节的小乐,上次给大家带来了Java注解-元数据.注解分类.内置注解和自定义注解|乐字节,这次接着往下讲注解处理器和servlet3.0 一.注解处理器 使用注解的过程中,很重要的一部分 ...

  6. 多线程（7）— JDK对锁优化的努力

    JDK内部的“锁”优化策略 1. 锁偏向 锁偏向是针对加锁操作的优化手段,核心思想是:如果一个线程获得了锁,那么锁就进入偏向模式,当这个线程再次请求锁时,无须再做任何同步操作,这样就节省了大量有关锁申 ...

  7. Python程序计算ax^2+bx+c=0方程根

    程序用来计算ax^2+bx+c=0的两个根,有些异常暂时无法处理: #!/usr/bin/python # -*- coding: utf-8 -*- #当程序存在中文时,注释表明使用utf-8编码解 ...

  8. [BZOJ3681]Arietta(可持久化线段树合并优化建图+网络流)

    暴力建图显然就是S->i连1,i->j'连inf(i为第j个力度能弹出的音符),j'->T连T[j]. 由于是“某棵子树中权值在某区间内的所有点”都向某个力度连边,于是线段树优化建图 ...

  9. asp.net后台或前端获取TemplateField绑定的文本

    GridView中使用最多的一个是BoundField,还有一个是TemplateField 这两个各有其特点,BoundField的话比较简单,设置好DataField.HeaderText等就可以 ...

  10. linux的scp命令可以在linux服务器之间复制文件和目录

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...