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. Android学习笔记样式资源文件

    样式资源和主题资源都是写在styles.xml文件里面的 <style name="title"> <item name="android:textSi ...

  2. VS Code WebApi系列——3、发布

    上两篇已经实现了WebApi及基于jwt的Token设置,那么功能做完了,该发布WebApi了.为什么要对发布进行一下说明呢,因为是基于vscode和.netcore的发布,所以可能会遇到莫名奇妙的问 ...

  3. C#基础——IO

    最近一直忙着做项目,偶尔会碰到一些文件读写方面的需求,当我回忆读写的代码时,发现脑子里存在诸多空白.这是不妙的,于是连忙翻出以前记下的笔记,上面还存在着我当初写下的知识点.怕以后哪天笔记找不到了或者有 ...

  4. Bestcoder Round8

    4989Summary 既然用C++了就偷懒直接用STL大法了 #include<iostream> #include<algorithm> #include<vecto ...

  5. 宝塔面板成功部署Django项目流程

    宝塔面板部署Django项目完整流程 上线Django项目记录,超简单,避免无意义的踩坑! 第一步:安装python管理器 在宝塔在线面板安装“python项目管理器” 第二步:安装适配python版 ...

  6. 007.OpenShift管理应用部署

    一 REPLICATION CONTROLLERS 1.1 RC概述 RC确保pod指定数量的副本一直运行.如果pod被杀死或被管理员显式删除,复制控制器将自动部署相应的pod.类似地,如果运行的po ...

  7. 《Elasticsearch 权威指南》阅读笔记

    书籍地址 https://www.elastic.co/guide/cn/elasticsearch/guide/current/languages.html

  8. android自定义控件onMeasure方法

    1.自定义控件首先定义一个类继承View 有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/ ...

  9. MyBatis学习笔记（2）--缓存

    一.什么是缓存 --存在于内存中的临时数据. 为什么使用缓存?--减少和数据库的交互次数,提高执行效率. 适用于缓存的数据: 1.经常查询并且不经常改变的数据. 2.数据的正确与否对最终结果影响较小的 ...

  10. html+css快速入门教程（4）

    练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...