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. <WP8开发学习笔记>动态修改启动时导航的第一个页面（如登录前启动页为LoginPage，登录后变为MainPage）

    很多时候我们需要在启动程序的时候根据状态改变初始导航页面,比如程序在启动的时候判断用户是否登录, 如果未登录则跳转到LoginPage.xaml否则跳转到MainPage界面. 这时候就要分析程序的启 ...

  2. MATLAB作图之一

    问题 在使用MATLAB当中的imagesc作图的时候,如果数据矩阵元素太少,得到的图看起来会很"粗糙"(图1).那么如何得到更为"圆润"的图像呢? A = r ...

  3. OKR-Periods of Words【KMP最小前后缀】

    OKR-Periods of Words 传送门:链接    来源:UPC 8180 题目描述 串是有限个小写字符的序列,特别的,一个空序列也可以是一个串.一个串P是串A的前缀,当且仅当存在串B,使得 ...

  4. 2019-02-02 Python学习——生成器杨辉三角，迭代器与可迭代对象的区别

    练习 杨辉三角定义如下: 1 / \ 1 1 / \ / \ 1 2 1 / \ / \ / \ 1 3 3 1 / \ / \ / \ / \ 1 4 6 4 1 / \ / \ / \ / \ / ...

  5. 十万同时在线用户，需要多少内存？——Newbe.Claptrap 框架水平扩展实验

    Newbe.Claptrap 项目是笔者正在构建以反应式.Actor模式和事件溯源为理论基础的一套服务端开发框架.本篇我们将来了解一下框架在水平扩展方面的能力. 前情提要 时隔许久,今日我们再次见面. ...

  6. python高级-闭包-装饰器

    闭包内容: 匿名函数:能够完成简单的功能,传递这个函数的引用,只有功能 普通函数:能够完成复杂的功能,传递这个函数的引用,只有功能 闭包:能够完成较为复杂的功能,传递这个闭包中的函数以及数据,因此传递 ...

  7. Git安装及配置SSH-Key

    下载Git 打开 https://git-scm.com/downloads 选择windows, 下载并安装. 配置全局用户名及邮箱 配置用户名 git config --global user.n ...

  8. 入门大数据---Hive是什么？

    这篇文章主要介绍Hive的概念. 简介: Hive中文名叫数据仓库管理系统,之前我们操作MapReduce必须通过编写代码或者通过特殊命令来实现,有了Hive我们通过常用的SQL语句就能操作MapRe ...

  9. jquery入门(1）

    1.jQuery简介 jQuery是一个快速.简洁的JavaScript框架,倡导写更少的代码,做更多的事情 jquery官方网站 jquery中文文档 1.1.简单函数封装 根据id.类名称来获取元 ...

  10. selenium（12）-web UI自动化项目实战（PO模式，代码封装）

    web UI自动化项目实战-项目 项目使用禅道,所以你需要搭建1个禅道,搭建禅道的方法和步骤见 https://www.cnblogs.com/xinhua19/p/13151296.html 搭建U ...