@Author：Runsen
@Date：2019/05/22

@updated Date：2020/05/30

我是非常反对用JQ的，原生的JS效果其实比JQ差不了太多，最近还是整理下JQ的笔迹吧

菜鸟教程

文章目录

jQuery
导入JQ
JS和JQ的转化
- $() 定义JQ对象
- each
- Jq操作属性
- 操作样式
事件
动画
animate
stop
delay

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQ是JS写的插件库，说白了，就是一个js文件

导入JQ

JS和JQ的转化

$() 定义JQ对象

each

<body><ul><li>001</li><li>002</li><li>003</li><li>004</li></ul><script src="jquery.js"></script><script>// var $li = $("ul li");$("ul li").each(function (i) {//第一个参数默认是序号/小标// this.innerHTML = "我是第"+i+"个";$(this).html("我是第"+i+"个");})</script>
</body>

Jq操作属性

<body><div id="box"><p class="box">1</p><p>2</p><p class="wrap">3</p></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"><script>/*attr 设置/获取 标签属性prop 设置/获取 标签属性  废除removeAttr()  移除标签属性removeProp()   废除addClass  加class名字removeClass传class 移除你传的那个没有  移除全部toggleClass 有就删没有则加操作class类名jq      jshtml()  innerHTMLtext()  innerTextval()   value在jq里面，设置某个值的时候，一般自带遍历获取某个值的时候，一般获取第一个*/var $box = $("#box");// alert($box.attr("id"));//读操作$box.attr("class","show");//写操作$box.removeAttr("class");$("p").eq(1).addClass("box show");// $("p").eq(1).removeClass();$("p").eq(1).removeClass("show");$("p").toggleClass("wrap");alert($("p").html());</script>
</body>

操作样式

<style>* {margin: 0;padding: 0;}#box{width: 200px;height: 200px;padding: 50px;border: 10px solid red;background: #aa8899;margin: 50px auto;position: relative;}#wrap{width: 50px;height: 50px;background: #111caa;position: absolute;top: 100px;left: 100px;}</style>
</head>
<body><div id="box"><div id="wrap"></div></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"><script>/*.css().width().height()innerWidth() / innerHeight 算了paddingouterWidth() / outerHeight 算了 padding+borderoffset()该对象有top /left 属性代表到浏览器窗口的 top/left的值position()该对象有top /left 属性代表到定位父级的 top/left的值*///alert($("#box").width());//200//alert($("#box").innerWidth());//300//alert($("#box").outerWidth());//320// oBox.style.width = "100px";//oBox.style.cssText ="width: 100px;height: 100px;";// $("#box").css("width","100px");/*$("#box").css({"width": "100px","height": "100px"});*///alert($("#box").offset().left);//alert($("#box").offset().top);alert($("#wrap").position().left);alert($("#wrap").position().top);</script>
</body>

就是改变类名来改变样式

事件

<body><ul id="box"><li>001</li><li>002</li><li>003</li><li>004</li></ul><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>/*jquery里面的事件都是函数形式的，去掉on的那种原理上事件都是事件绑定的形式而不是赋值的形式jquery事件绑定、解绑所有事件的添加都是绑定的形式可以通过on来添加事件*/var oBox = document.querySelector("#box");/*oBox.onclick = function () {alert(1);};oBox.onclick = function () {alert(2);};*//*$("#box").click(function () {alert(1);});$("#box").click(function () {alert(2);})*///on绑定单个事件/*$("#box li").on("click",function () {alert($(this).index());//index()在jq里面是方法 对应的是你的下标});*///on绑定多个事件/*$("#box").on({"click": function () {console.log(1);},"mouseenter": function () {console.log(2);},"mouseleave": function () {console.log(3);}});*///$("#box").off("mouseenter");//移除满足条件的事件//$("#box").off();//移除事件// $("#box").hover(function () {//     console.log(5);//移入移出都执行这个函数// });$("#box").hover(function () {console.log(5);//移入函数},function () {console.log(9);//移出函数});</script>
</body>

动画

<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box{width: 200px;height: 200px;background: #aa8899;}</style>
</head>
<body>
<div id="box"></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>/*不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度showhidetoggle默认时间300毫秒 改变透明度fadeInfadeOutfadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略默认时间300毫秒  改变高度slideDownslideUpslideToggle 改变高度这三组，不仅仅可以接受一个数字参数，能接受的参数有：* number / string  代表动画时间（可缺省）   毫秒数 / （"fast" "normal" "slow"）* string   代表运动曲线（可缺省）* function   代表回调函数（可缺省）*/var $box = $("#box");$(document).click(function () {// $box.toggle(2000);// $box.fadeTo(2000,0.2);// $box.slideToggle(2000);});var off = true;$(document).click(function () {if(off){// $box.hide(2000);// $box.fadeOut(3000);$box.slideUp(1000);}else{// $box.show(2000);// $box.fadeIn(3000);$box.slideDown(1000);}off = !off;})</script>
</body>

animate

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box{width: 200px;height: 200px;background: #33aa75;}</style>
</head>
<body>
<div id="box"></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>/*animate传参：* obj  必传  { }格式代表的变化的属性和目标值  数值变化* number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300* string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"* function 可缺省，代表动画结束后的回调函数
*/var $box = $("#box");$box.animate({"width": "400px","height": "400px"});
</script>
</body>
</html>

stop

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}li{list-style: none;float: left;height: 50px;line-height: 50px;padding: 0 10px;background: #aa8899;margin-right: 5px;}</style>
</head>
<body><ul id="box"><li>佚名</li><li>老谭</li><li>空大</li><li>明明</li><li>王洁林</li><li>无处不风景</li></ul><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script><script>/*stop清空动画队列，可以接受两个布尔值参数第一个不用管第二个决定是否瞬间到达队列终点，true 到   false(默认) 不到*/$("#box li").hover(function () {$(this).stop(true,false).animate({"height": "500px"})},function () {$(this).stop(true,false).animate({"height": "50px"})})</script>
</body>
</html>

delay

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}div{width: 200px;height: 200px;background: #33aa75;}</style>
</head>
<body>
<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
<script>/*delay 只对动画有用*//*$(document).click(function () {// $("#box").delay(3000).fadeOut(2000);$("#box").delay(3000).css("width","300px");})*/$("#box").delay(3000).queue(function () {$("#box").css("width","300px");})
</script>
</body>
</html>

更多的

http://jquery.cuishifeng.cn/

https://www.runoob.com/jquery/jquery-tutorial.html

十七、去年jQuery的笔记相关推荐

jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
json.js+ jquery 操作笔记
json.js+ jquery 操作笔记 json.js下载地址: http://www.json.org/js.html 我初学JSON,按照官方说明,在json2.js中有parse和string ...
jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串 ...
jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...

十七、去年jQuery的笔记