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. 十几万条数据的表中，基于帝国cms 。自己亲身体验三种批量更新数据的方法，每一种的速度是什么样的

    需求是 上传Excel 读取里面的数据.根据Excel中某一个字段,与数据表中的一个字段的唯一性.然后把 Excel表中数据和数据库表中数据一次更改.本次测试一次更新31条数据. 本次测试基于帝国cm ...

  2. [PyQt5]文件对话框QFileDialog的使用

    概述选取文件夹 QFileDialog.getExistingDirectory()选择文件 QFileDialog.getOpenFileName()选择多个文件 QFileDialog.getOp ...

  3. 如何使用 Shell 脚本来查看多个服务器的端口是否打开？

    我们在进行服务器配置的时候,经常要查看服务器的某个端口是否已经开放.如果服务器只有一两台的话,那很好办,只需要使用 nc 命令一个个查看即可. 但是,如果你的服务器是个集群,有很多台呢?那如果还一个个 ...

  4. 【Spring注解驱动开发】面试官：如何将Service注入到Servlet中？朋友又栽了！！

    写在前面 最近,一位读者出去面试前准备了很久,信心满满的去面试.没想到面试官的一个问题把他难住了.面试官的问题是这样的:如何使用Spring将Service注入到Servlet中呢?这位读者平时也是很 ...

  5. linear-gradient，radial-gradient 渐变

    一.渐变效果 ->  线性渐变 方法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ...

  6. ZooKeeper使用入门

    ZooKeeper简介 ZooKeeper是一个分布式的,开源的分布式应用程序协调服务,是Hadoop的子项目之一.它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护.域名服务.分布式 ...

  7. 漏洞复现 MS11-003

    0x01漏洞简介 ms11-003(windows7IE溢出攻击) 是利用IE8中对css的解析存在一个问题,导致任何访问包含非法css的页面将导致IE8崩溃重启的漏洞. 0x02环境准备 攻击机:k ...

  8. vue 生成二维码+截图

    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...

  9. 并发编程-CPU执行volatile原理探讨-可见性与原子性的深入理解

    volatile的定义 Java语言规范第3版中对volatile的定义如下:Java编程语言允许线程访问共享变量,为了确保共享变量能被准确和一致地更新,线程应该确保通过排他锁单独获得这个变量.Jav ...

  10. Python 程序报错崩溃后，如何倒回到崩溃的位置？

    假设我们有一段程序,从 Redis 中读取数据,解析以后提取出里面的 name 字段: import json import redis client = redis.Redis() def read ...