关键词：
jQuery学习
本篇主要参考菜鸟教程
jQuery安装
BootCDN
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
百度
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">jQuery语法
通过jQuery,可以选取(查询,query) HTML元素,并对它们执行"操作"(actions)
基础语法:$(selector).action()
- 美元符号定义jQuery
- 选择符(selector)"查询"和"查找"HTML元素
- jQuery的action()执行对元素的操作
实例
- $(this).hide()-隐藏当前元素
- $("p").hide()-隐藏所有
元素
- $("p.test").hide()-隐藏所有class="test"的
元素
- $("#test").hide()-隐藏所有id="test"的元素
文档就绪事件
$(document).ready(function()
//开始写jQuery代码
); 这是为了防止文档在完全加载就绪之前运行jQuery代码.还有更加简洁的写法:
$(function()
//开始写代码
);JavaScript入口函数:
window.onload = function()
//开始写代码
jQuery入口函数与javaScript入口函数的区别:
- jQuery的入口函数式在html所有标签(DOM)都加载之后,就会去执行.
- JavaScript的window.onload事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行.
jQuery选择器
元素选择器
jQuery元素选择器基于元素名选取元素.
在页面中选取所有
元素
$("p")实例
用户点击按钮后,所有
元素都隐藏
$(function()
$("button").click(function()
$("p").hide();
)
)ID选择器
通过id选取元素语法如下:
$("#test")实例
当用户点击按钮后,有id="test"的属性的元素将被隐藏:
$(function()
$("button").click(function()
$("#test").hide();
)
)class选择器
jQuery类选择器可以通过指定的class查找元素.
语法如下:
$(".test");实例
用户点击按钮后所有带有class="test"属性的元素都隐藏:
$(fucntion()
$("button").click(function()
$(".test").hide();
)
);番外
通过$(":button")可以选取所有type="button"的<input>元素和<button>元素,如果去掉冒号,$("button")智能选取<button>元素.
关于:和[]这两个符号的理解
:可以理解为种类的意思,如:p:first,p的种类为第一个.
[]很自然的可以理解为属性的意思,如:[href]选取所有带href属性的元素.| 语法 | 描述 |
|---|---|
| (("*")|选取所有元素| |)(this) | 选取当前HTML元素 |
| (("p.intro")|选取class为intro的p元素| |)("p:first") | 选取第一个p元素 |
| (("ul li:first")|选取第一个ul元素的第一个li元素| |)("ul li:first-child") | 选取每个ul元素的第一个li元素 |
| (("[href]")|选取带有href属性的元素| |)("a[target=‘_blank‘]") | 选取所有target属性值等于"_blank"的a元素 |
| (("a[target!=‘_blank‘]")|选取所有target属性值不等于"_blank"的a元素| |)("tr:event") | 选取偶数位置的tr元素 |
| $("tr:odd") | 选取奇数位置的tr元素 |
jQuery事件
常用DOM事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery事件方法语法
页面中指定一个点击事件:
$("p").click()下一步是定义完成什么:
$("p").click(function()
//动作触发后的执行代码
)常用的jQuery事件方法
$("p").click(function()
)
$("p").dblclick(function()
)
$("p").mouseenter(function()
)
$("p").mouseleave(function()
)
$("p").mousedown(function()
)
$("p").mouseup(function()
)
$("p").hover(function()
)
$("input").focus(function()
)
$("input").blur(function()
)
$(window).keydown(function(event)
//通过event.whitch可以拿到按键代码.
)传递数据给事件处理函数
jQuery.keydown([[data,] handler]);
- data:通过event.data传递给事件处理函数的任意数据
- handler:指定的事件处理函数;
举例:
var validKeys = start: 65, end: 90;
$("#key").keydown(validKeys, function(event)
var keys = event.data;//拿到validkeys对象.
return event.which >= keys.start && event.which <= keys.end;
)jQuery效果-隐藏和显示
隐藏,显示,切换,滑动,淡入淡出,以及动画.
jQuery.hide()和show()
$("#hide").click(function()
$("p").hide();
)
#("#show").click(function()
$("p").show();
)语法:
$(selector).hide(speed, callback);
$(selector).show(speed, callback);可选的speed参数规定隐藏/显示的速度,可以取以下值:"slow","fast"或毫秒.
可选的callback参数是隐藏或显示完成后执行的函数名称.
例子:
$(function()
$("click").click(function()
$("p").hide(2000, function()
console.log("隐藏完毕!");
)
)
)jQuery.toggle()
通过jQuery,可以使用toggle()方法来切换hide()和show()方法.
语法:
$(selector).toggle(speed, callback);
与show,hide相同的参数意义
$("button").click(function()
$("p").toggle(1000, function()
console.log("ok");
);
)番外
对于可选的callback参数,有以下两点说明:
- $(selector)选中的元素的个数为n哥,则callback函数会执行n次.
- callback函数名后加括号,会立即执行函数,而不是等到显示或隐藏完成后执行,但是只会执行一次.
callback既可以是函数名,也可以是匿名函数;
jQuery效果-淡入淡出
通过jQuery可以实现元素的淡入淡出效果,拥有四种fade方法:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn()方法
用于淡入已隐藏的元素.
语法:
$(selector).fadeIn(speed, callback)
例子:
$("#wo").click(function()
$("p").fadeIn(1000, function()
console.log("可以整");
)
)jQuery fadeOut()方法
用于淡出可见元素.
语法:
$(selector).fadeout(speed, callback);
例子:
$(selector).click(function()
$("#p").fadeOut();
#("#a").fadeOut(3000);
)jQuery fadeToggle()方法
该方法可以在fadeIn()方法和fadeOut()方法之间进行切换.
语法:
$(selector).fadeToggle(speed, callback)
例子:
$("button").click(function()
$("#div1").fadeToggle();
$("#div2").fadeToggle(3200);
)jQuery fadeTo()方法
该方法允许渐变为给定的不透明度(值介于0与1之间).
语法:
$(selector).fadeTo(speed, opacity, callback)
必须的speed参数规定效果的时长
opacity参数为淡入淡出效果设置的不透明度.
可选的callback参数是该函数完成后所执行的函数名称.
例子:
<p style="color: red;">设施显示的画面</p>
<p style="color: blue;">这是例外</p>
<button id="abc">点击我</button>
<button id="wo">点对对对</button>
<script>
$(function()
$("#abc").click(function()
$("p").fadeTo(2000, 0.3);
)
)
</script>jQuery效果-滑动
滑动方法:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown()方法
$(selector).slideDown(speed, callback)
例子:
<div style="color: red;">设施显示的画面</div>
<div style="color: blue;">这是例外</div>
<button id="abc">点击我</button>
<button id="wo">点对对对</button>
<script>
$(function()
$("#abc").click(function()
console.log("ds");
$("div").slideDown(2000);
)
)
</script>jQuery slideUp()方法
该方法用于向上滑动元素
$(selector).slideUp(speed, callback)
jQuery slideToggle()方法
该方法可以在slideDown()与slideUp()方法之间切换.
$(selector).slideToggle(speed, callback)
前段学习——jquery(代码片段)
一、什么是jQuery对象？Query 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:$(“#test”).html();$("#test").html... 查看详情
jquery学习(代码片段)
什么是jQuery? jQuery是一个JavaScript函数库。 jQuery有以下功能： 1、html元素的选取 2、html元素操作 3、css操作 4、html事件函数 5、JavaScript特效和动画 jQuery的简单使用： 首先，我知道jQuery是一个J... 查看详情
jquery学习笔记详解--(一）(代码片段)
概念 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 就是一堆JavaScript代码 jQuery库包含以下功能： HTML元素选取 HTML元素操作 ... 查看详情
jquery学习----选择器(代码片段)
学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。下面是Jquery中常见的选择器：一、基本选择器$("div").css("background-color","red");//表示对所有的div增加背... 查看详情
jquery简单学习(代码片段)
入门：1.在官网中下载jquery2.在html页面中引入,使用script标签对引入jquery3.在html页面中使用jquery使用:通过jquery实现隔行换色先引入：<scriptsrc="js/jquery-3.6.0.min.js"></script><script>$(function()/* 查看详情
jquery学习笔记(代码片段)
一、JQuery介绍JQuery是一个轻量级、兼容多浏览器的JavaScript库。可以更方便的处理HTMLDocument、Events、实现动画效果、方便的进行Ajax交互，能够极大的简化JavaScript编程。JQuery1.X版本兼容IE678，官方制作BUG维护，功能不更新。3.x版本... 查看详情
jquery基础学习(代码片段)
1jQuery的基础官网地址：https://jquery.com/在线手册地址：https://jquery.cuishifeng.cn/1.1jQuery的版本不同的版本jQuery-3.6.0.js完整版、开发版，适合开发环境jquery-3.6.0.min.js压缩版、产品版(去掉了空格、换行，简化了变量名)&#x... 查看详情
jquery入门学习01(代码片段)
一:什么是jQuery？为什么要使用jQuery？ 1.jQuery是一个优秀的实用JavaScript库，内部封装了很多实现的函数和对象. 2.jQuery是目标是：写少代码，做多事情，是相对于原始javascript+dom的方式而言. 3.jQue... 查看详情
nodejs学习笔记jquery使用(代码片段)
引用jquery因为node里没有浏览器的window对象。所以得曲线救国。可以通过jsdom来模拟。关键代码如下：constJSDOM=require("jsdom");constwindow=newJSDOM("");const$=require("jquery")(window);//这样jquer 查看详情
markdown[jquery效果-隐藏和显示]＃学习笔记#web编程#jquery(代码片段)
markdown[jquery-设置内容和属性]＃学习笔记#web编程#jquery(代码片段)
markdown[jquery-获得内容和属性]＃学习笔记#web编程#jquery(代码片段)
前端学习——jquery操作例子(代码片段)
一、jquery和DOM函数的转换1、1jquery转换成dom$(‘#i1‘)-------------->$(‘#i1‘)[0]2、1dom转换成jqueryvari1=documen.getElementById(‘#i1‘)--------->$(i1)二、写左侧菜单<!DOCTYPEhtml><htmllang="en"><head>< 查看详情
markdown[jquery-css（）方法]＃学习笔记#web编程#jquery(代码片段)
jquery学习笔记汇总2-jquery(代码片段)
知识点提炼 方法show();等价于设置元素的display属性为block方法hide();等价于设置元素的display属性为noneprev();上一个兄弟。prevAll();之前所有的兄弟next();下一个兄弟。nextAll();之后所有的兄弟on可用来注册事件。off（）用来解... 查看详情
jquery基础与学习资源(代码片段)
1、javascript对象与each代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><scripttype="text/javascript"src="js/jquery-1. 查看详情
前端jquery学习--03(代码片段)
1、tab切换<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><metaname="viewport"content="width=device-width,initial-scale=1"><style& 查看详情
jquery的基础学习(代码片段)
1.挂事件： 运用JQuery，当点击挂事件时给div加上一个点击事件，当点击移除事件按钮时则取消掉这个div上的点击事件。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">& 查看详情