jQuery

javaScript和jQuery的关系？

jQuery库，里面存在大量的JavaScript函数

获取jQuery

公式：$(selector).action()

<!DOCTYPE html>

<html lang = "en">

    <head>

        <meta charset = "UTF-8">

        <title>Title</title>

        <script src="lib/jquery-3.4.1.js"></script>

    </head>

    <body>

        <a href="" id = "test-jquery">点我</a>

        <script>

            //选择器就是css选择器

            $('#test-jquery').click(function(){

                alert('hello,jQuery!');

            });

        </script>

    </body>

</html>

选择器

//原生js，选择器少，麻烦不好记

//标签

document.getElementByTagName();

//id

document.getElementById();

//class

document.getElementByClassName();

//jQuery css中的选择器它全部都能用！

$('p').click();//标签选择器

$('#id1').click();//id选择器

$('.class1').click;//class选择器

文档工具站：http://jquery.cuishifeng.cn/

事件

鼠标事件、键盘事件，其他事件

mousedown()(jQuery)----按下

mouseenter()(jQuery)

mouseleave()(jQuery)

mousemove()(jQuery)----移动

mouseout()(jQuery)

mouseover()(jQuery)

mouseup()(jQuery)
<!DOCTYPE html>

<html lang = "en">

    <head>

        <meta charset = "UTF-8">

        <title>Title</title>

        <script src="lib/jquery-3.4.1.js"></script>

        <style>

            #divMove{

                width:500px;

                height:500px;

                border:1px solid red;

            }

        </style>

    </head>

    <body>

        <!--要求：获取鼠标当前的一个坐标-->

        mouse：<span id = "mouseMove"></span>

        <div id = "divMove">

            在这里移动鼠标试试

        </div>

        <script>

            //当网页元素加载完毕之后，响应事件

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

            $(function(){

                $('#divMove').mousemove(function(e){

                    $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)

                })

            });

        </script>

    </body>

</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值

$('#test-ul li[name=python]').text('设置值');//设置值

$('#test-ul').html();//获得值

$('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏，：本质display:none

$('#test-ul li[name=python]').show();

$('#test-ul li[name=python]').hide();

娱乐测试

$(window).width()

$(window).height()

$('#test-ul li[name=python]').toggle();

未来ajax()；

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){

    $(this).addClass("done");

}})

小技巧

1、如何巩固JS（看jQuery源码，看游戏源码！）

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）

javascript基础（五）： jQuery的更多相关文章

  1. Javascript基础五（BOM和DOM）

    1.BOM概念 什么是BOM?         BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window         BOM提供了独立于内容而与浏览器窗 ...

  2. javascript基础(五)函数

    原文http://pij.robinqu.me/ 通过call和apply间接调用函数(改变this) call 和 apply带有多个参数,call和apply把当前函数的this指向第一个参数给定 ...

  3. javascript基础 之 jQuery教程

    1,jQuery是js的一个库 基本功能: HTML元素获取和操作,html事件操作. css操作. js特效和动画 DOM遍历和修改 ajax Utilities 特性: js2以上的版本不支持ie ...

  4. JavaScript 基础(五) 函数 变量和作用域

    函数定义和调用 定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } ...

  5. 第五模块·WEB开发基础-第2章JavaScript基础

    第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...

  6. 使用jQuery快速高效制作网页交互特效第一章JavaScript基础

    JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...

  7. 前端基础(五)：jQuery

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  8. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  9. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

随机推荐

  1. SpringBoot整合分布式ZooKeeper和Dubbo

    ZooKeeper ZooKeeper是一个分布式的,开放远吗的分布式应用程序协调服务.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式同步.组服务等. 服务提供者 ...

  2. Largest Allowed Area【模拟+二分】

    Largest Allowed Area 题目链接(点击) 题目描述 A company is looking for land to build its headquarters. It has a ...

  3. Kubernetes-subpath的使用

    一.什么是subpath 为了支持单一个pod多次使用同一个volume而设计,subpath翻译过来是子路径的意思,如果是数据卷挂载在容器,指的是存储卷目录的子路径,如果是配置项configMap/ ...

  4. python反向遍历一个可迭代对象

    我们通常情况下都是正向遍历一个列表,下面是一种简单的反向遍历一个列表的方式. ## 正向遍历 >>>A = [9, 8, 7] >>>for index, a in ...

  5. Python实现梯度法(最速上升(下降)法)寻找函数极大(极小)值

    首先简介梯度法的原理.首先一个实值函数$R^{n} \rightarrow R$的梯度方向是函数值上升最快的方向.梯度的反方向显然是函数值下降的最快方向,这就是机器学习里梯度下降法的基本原理.但是运筹 ...

  6. ca77a_c++__一个打开并检查文件输入的程序_流对象_操作文件

    /*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14*/ /*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14 */ #include < ...

  7. 05.DRF-Django REST framework 简介

    一.明确REST接口开发的核心任务 分析一下上节的案例,可以发现,在开发REST API接口时,视图中做的最主要有三件事: 将请求的数据(如JSON格式)转换为模型类对象 操作数据库 将模型类对象转换 ...

  8. Spring如何解决循环依赖？

    介绍 先说一下什么是循环依赖,Spring在初始化A的时候需要注入B,而初始化B的时候需要注入A,在Spring启动后这2个Bean都要被初始化完成 Spring的循环依赖有两种场景 构造器的循环依赖 ...

  9. Java开发中的23种设计模式详解(收藏-转)

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  10. ArrayList、Vector、LinkedList 区别及底层实现

    一.ArrayList.Vector.LinkedList 三者区别 1.ArrayList  底层:是数组结构,查询快,增删慢,线程不安全,效率高.2.LinkedList底层:是链表数据结构,查询 ...