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. 数列计算I(整理四舍五入)

    问题 C: 数列计算I(点击) 时间限制: 1 Sec  内存限制: 128 MB                                                           ...

  2. Node.js 学习笔记（二）

    express是nodejs的一个轻量级框架. express的功能很简单, 功能依赖中间件. 安装:在你的项目文件价里打开cmd窗口,在里面使用npm工具(就是在cmd里输入 npm install ...

  3. python+selenium识别图片验证码

    import timeimport pytesseractfrom PIL import Image, ImageEnhancefrom selenium import webdriver url = ...

  4. 备份、恢复数据库（Dos命令提示符下）_数据库安装工具_连载_1

    Dos命令提示符下: 备份.恢复数据库,是不是很简单啊,是的,当你20年不碰MS SQL,是不是又忘记了呢,答案也许也是吧,^_^虽然在程序中执行SQL代码时,很讨厌那个Go,正如MySQL中那个分号 ...

  5. Docker数据管理与挂载管理

    介绍如何在 Docker 内部以及容器之间管理数据:在容器中管理数据主要有两种方式:数据卷(Volumes).挂载主机目录 (Bind mounts) 镜像来源 [root@docker01 ~]# ...

  6. Typescript的interface、class和abstract class

    interface,class,和abstract class这3个概念,既有联系,又有区别,本文尝试着结合官方文档来阐述这三者之间的关系. 1. Declaration Merging Declar ...

  7. ZooKeeper开机启动的俩种方式

    两种方式可以实现开机自启动 第一种:直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行, 其中export JAVA_HOME=/usr/jav ...

  8. 四层发现-TCP发现

    直接向目标ip发送一个ACK数据包,正常情况下up状态的目标ip会返回一个SRT数据包. 使用scapy构造TCP数据包: 然后在将一些数据类型设置好就可以发送了. 实用脚本实现批量扫描: #!/us ...

  9. 线上redis问题修复：JedisConnectionException: Unexpected end of stream.

    经过: 项目上线后经常报 Unexpected end of stream.; nested exception is redis.clients.jedis.exceptions.JedisConn ...

  10. Hexo快速构建个人小站-Fulid主题下添加Valine评论系统(三)

    Hexo目录: Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一) Hexo快速构建个人小站-自定义域名和自定义主题(二) 背景交代: 前面两章完成了Hexo的初始化和部分自定义 ...