jQuery笔记归纳
使用jQuery前首先需要导如jQuery包:https://jquery.com/（点击下载按钮，进入后点击鼠标右键另存为即可下载）
例如：<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
jQuery选择器
- 标签选择器
- id选择器 $("#id")
- 类选择器 $(".class")
- 群组选择器 $("选择器1,选择器2,...,选择器n")
- 兄弟选择器 **** $("兄弟") 平级关系
- 相邻元素选择器 +
- 父子选择器 > $("父>子")
- 祖先子孙选择器 \((" 空格 ")  \)("祖 子")
- 表单元素选择器 $(":表单元素")
- 元素属性选择器 $("html元素[属性名称=属性值]")
- 伪类选择器 $("真实选择器:伪类属性")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
#div1,#div2,#div3{
width: 50px;
height: 50px;
border: 3px solid teal;
float: left;
line-height: 50px;
text-align: center;
}
ul li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
// 设置所有div向右移动10px
$("div").css({"margin-left":"10px"});
// 兄弟选择器
$("h1~div").css("color","red");
// 相邻元素选择器
$("h1+div").css("color","blue");
// 表单元素选择器
$(":text").val("Hello jQuery");
// 元素属性选择器
$("input[type=password]").val("123456");
// 伪类选择器(第一个元素)
$("ul>li:first-child").css("background-color","pink");
// 最后一个元素
$("ul>li:last-child").css("background-color","green");
// 第三个元素
$("ul>li:nth-child(3)").css("background-color","yellow");
// 倒数第三个元素
$("ul>li:nth-last-child(3)").css("background-color","teal");
// 把除第4个以外的字体样式都设置为"黑体"
$("ul>li:not(:nth-child(4))").css("font-family","黑体");
// 奇数项
$("ul>li:nth-child(odd)").css("border","2px dashed red");
// 偶数项
$("ul>li:nth-child(even)").css("border","2px solid");
/**
* eq()：匹配一个给定索引值的元素
* gt()：匹配所有大于给定索引值的元素
* lt()：匹配所有小于给定索引值的元素
* 注意：索引从0开始的
*/
$("ul>li:eq(1)").css("color","orange");
// $("ul>li:gt(2)").css("color","orange");
// $("ul>li:lt(2)").css("color","orange");
// :header 匹配如 h1, h2, h3之类的标题元素
$("h1:header()").css("color","teal");
})
</script>
</head>
<body>
<h1>我是一级标题</h1>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<br /><br /><br />
<input type="text" id="in_txt" name="inText" placeholder="文本框" /><br />
<input type="password" id="in_psd" name="inPsd" placeholder="密码框" />
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</body>
</html>
jQuery事件
单击事件 click()
双击事件 dblclick()
焦点事件 focus()：触发焦点， blur() ：失去焦点
鼠标事件
mouseOver()：鼠标悬停事件
mouseMove()：鼠标移动事件
mouseDown()：鼠标按下事件
mouseUp()：鼠标释放事件
mouseOut()：鼠标离开事件
键盘事件
keyUp()：键盘释放事件
keyDown()：键盘按下事件
keyPress()：键盘按下和释放之间的事件
选项改变事件 change()
hover事件：
一次能够绑定多个事件，它在鼠标事件上进行了扩充，在hover事件上能够将鼠标悬停和离开绑定在一起
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover事件</title>
<style>
#div1{
width:200px;
height:200px;
border: 1px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//悬停显示背景颜色，离开清除背景颜色
$("#div1").hover(function(){
$(this).css("background-color","teal");
},function(){
$(this).css("background-color","");
});
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
绑定/解绑事件 on()/off()
on()：在选择元素上绑定一个或多个事件的事件处理函数。
off()：在选择元素上移除一个或多个事件的事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定/解绑事件</title>
<style>
#div1{
width:120px;
height:auto;
border:3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//on是绑定事件的函数
//参数1：事件名称
//参数2：选择器(一个或者多个)
//参数3：一旦事件源触发事件，执行的回调函数
$("#div1").on("click",".p1,.p3",function(){
$(this).css("color","red");
})
// off()：解除绑定
// 参数1：之前绑定的事件 参数2：选择器
$("#div1").off("click",".p1,.p2");
})
// Servlet+Jquery+ajax
</script>
</head>
<body>
<div id="div1">
<p class="p1">晴川历历汉阳树</p>
<p class="p2">芳草萋萋鹦鹉洲</p>
<p class="p3">烟波江上使人愁</p>
</div>
</body>
</html>
操作节点的属性
val()：获得匹配元素的当前值。 对应js的value属性
attr()：设置或返回被选元素的属性值。 对应js的setAttribute和getAttribute
prop()：获取在匹配的元素集中的第一个元素的属性值。 用户input标签 type='checkbox' checked属性值的设置
text()：取得所有匹配元素的内容。 对应js的innerText
html()：取得第一个匹配元素的html内容。 对应js的innerHTML
遍历节点 each()
遍历祖先节点：parent()、遍历后代节点：children()、遍历同辈节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery遍历节点</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 遍历祖先节点 -->
<script>
$(function(){
// 获取上一级父元素$("#sixth").parent()
$("#sixth").parent().css("color","pink");
// each()：规定为每个匹配元素规定运行的函数（遍历）
$("#sixth").parent().each(function(){
console.log("遍历#sixth的父节点");
var att = $(this).attr("id");
console.log(att);
});
// .parents().each()：遍历所有父节点
$("#sixth").parents().each(function(){
// this.tagName：获取标签名称
console.log(this.tagName);
});
// .parents("").each()：获取指定的父元素
$("#sixth").parents("#div-zhuxian").each(function(){
var att = $(this).attr("id");
console.log(att);
});
})
</script>
<!-- 遍历后代节点 -->
<script>
$(function(){
// children()：只能获取父元素下的一级子元素
$("#div-zhuxian").children().each(function(){
// this.tagName：获取标签名称
console.log("遍历后代节点：" + this.tagName);
if(this.tagName=="P"){ // 注意：标签名称必须大写
$(this).css("background-color","pink");
}
if($("#first")){
var val1 = $(this).innerText = "666";
console.log(val1);
// on()：在选择元素上绑定一个或多个事件的事件处理函数
$("#div-zhuxian").on("click","#first",function(){
$(this).css("background-color","teal");
});
}
});
})
</script>
<!-- 遍历同辈节点（不涉及父元素和子元素） -->
<script>
$(function(){
// next()：获取下一个同辈元素
$("#third").next().css("background-color","salmon");
// nextAll()：查找当前元素之后所有的同辈元素
$("#third").nextAll().css("background-color","teal");
// 获取上一个同辈元素
$("#fourth").prev().css("font-size","20px");
// prevAll()：查找当前元素之前所有的同辈元素
$("#fourth").prevAll().css("font-size","30px");
// siblings()：获取所有的同辈元素
$("#fourth").siblings().css("color","red");
})
</script>
</head>
<body>
<div id="div-zhuxian">
<p id="first">AAA</p>
<p id="second">BBB</p>
<div id="div-father">
<p id="third">CCC</p>
<p id="fourth">DDD</p>
<div id="div-son">
<p id="fifth">EEE</p>
<p id="sixth">FFF</p>
</div>
</div>
</div>
</body>
</html>
节点操作
内部插入节点
首部插入：prepend()/prependTo()，尾部插入：append()/appendTo()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 150px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 将子元素插入到父元素的首部 -->
<script>
$(function(){
var newElement = $("#div1").prepend("<p id='p0'>P0标签</p>");
$("#p0").css("font-size","12px");
// 为所有的P标签增加class属性
newElement.addClass("label");
// 为所有类为label的标签添加样式
$(".label").css("color","red");
// prepend()：向每个匹配的元素内部前置内容。
$("#div1").prepend("<p>BBBBBB</p>")
/*prepend：正向插入子元素 $("父选择器").prepend("字符串")；
prePend使用父元素为参照物 */
// prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中
$("<p>AAAAAA</p>").prependTo("#div1"); // 把p标签添加到id为div1的盒子中
/*prependTo：反向插入子元素 $("子选择器").prependTo("父选元素择器"):
prependTo使用子元素为参照物 */
})
</script>
<!-- 将子元素插入到父元素的尾部 -->
<script>
$(function(){
// append：附加
// $("父元素选择器").append("子元素选择器")：将子元素追加到父元素的末尾，正向追加
$("#div1").append("<h6>我是6级标签</h6>");
//$("子元素选择器").appendTo("父元素选择器")：资源元素追加到父元素的末尾，反向追加
$("<P>P标签</P>").appendTo("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
外部插入节点
之前插入：before()/insertBefore()，之后插入：after()/insertAfter()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 外部插入节点 -->
<!-- 外部之前插入节点 -->
<script>
$(function(){
// bofore()：在每个匹配的元素之前插入内容，正向插入
$("#div1").before("<div>短歌行 （曹操）</div>")
// insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面，反向插入
$("<p>对酒当歌，人生几何！</p>").insertBefore($("#div1"));
$("<p>譬如朝露，去日苦多。</p>").insertBefore("#div1");
})
</script>
<!-- 外部之后插入节点 -->
<script>
$(function(){
// after()：在每个匹配的元素之后插入内容，正向插入
$("#div1").after($("<p>山不厌高，海不厌深。</p>"));
$("#div1").after("<p>何以解忧，唯有杜康。</p>");
// 把所有匹配的元素插入到另一个、指定的元素元素集合的后面，反向插入
// 后插入的元素离div最近
$("<p>慨当以慷，忧思难忘。</p>").insertAfter("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
删除节点：remove()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove()：删除节点</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 删除节点 -->
<script>
$(function(){
$("#p1").click(function(){
// remove()：删除指定节点
$("#p1").remove();
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
清空节点：empty()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty()：清空节点</title>
<style>
ul>li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
// 清空ul下面所有的li
$("ul>li").empty();
})
})
</script>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
<input type="button" id="btn" value="清空" />
</body>
</html>
克隆节点：clone()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone()：克隆节点</title>
<style>
#div1{
width: 100px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 克隆节点 -->
<script>
$(function(){
$("#c_btn").click(function(){
// 将id为p1的标签克隆到id为div1中
$("#p1").clone().prependTo("#div1");
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
<input type="button" id="c_btn" value="克隆" />
</body>
</html>
动画操作
隐藏和显示：hide()/show()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery隐藏和显示</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 隐藏和显示 -->
<script>
$(function(){
$("#h_btn").click(function(){
// hide()：隐藏 ()中是隐藏所用的时间，毫秒为单位
// $("#div1").hide();
$("#div1").hide(1000);
});
$("#s_btn").click(function(){
// show()：显示 ()中是显示所用的时间，毫秒为单位
// $("#div1").show();
$("#div1").show(1000);
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="h_btn" value="隐藏" />
<input type="button" id="s_btn" value="显示" />
</body>
</html>
淡出和淡入
fadeOut()：淡出(亮--->暗)，fadeIn()：淡入(暗--->亮)，fadeTo()： 渐变，fadeToggle()：淡入淡出切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery淡出和淡入</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 淡入和淡出 -->
<script>
$(function(){
$("#btn1").click(function(){
// fadeOut()：淡出
$("div").fadeOut(1000);
})
$("#btn2").click(function(){
// fadeIn()：淡入
$("div").fadeIn(1000,function(){
alert("成功淡入");
})
})
// 淡入和淡出之间切换
$("#btn3").click(function(){
//fadeToggle()：在淡入和淡出之间切换
// 一旦淡出执行完毕，按钮变为淡入,否则变为淡出
$("div").fadeToggle(1000,function(){
if($("#btn3").val()=="淡出"){
$("#btn3").val('淡入');
}else{
$("#btn3").val('淡出');
}
})
})
// 渐变
$("#btn4").click(function(){
// 参数1：渐变的时间 参数2：0.0~1.0之间的透明度
$("div").fadeTo(1000,0.7);
$("div").fadeTo(1000,0.4);
$("div").fadeTo(1000,0.1);
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="淡出" />
<input type="button" id="btn2" value="淡入" />
<input type="button" id="btn3" value="淡出" />
<!-- 透明度在1.0~0.0之间慢慢的变暗 -->
<input type="button" id="btn4" value="渐变" />
</body>
</html>
收起和展开
slideUp(): 收起，slideDown()：展开，slideTo()：收起和展开之间切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery收起与展开</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 收起与展开 -->
<script>
$(function(){
$("#btn1").click(function(){
//slideUp()：收起（上下收起）
$("div").slideUp(1000);
})
$("#btn2").click(function(){
//slideDown()：展开（上下展开）
$("div").slideDown(1000);
})
// slideToggle()：收起跟展开之间切换
$("#btn3").click(function(){
$("div").slideToggle(2000,function(){
if($("#btn3").val()=='收起'){
$("#btn3").val('展开');
}else{
$("#btn3").val('收起');
}
})
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="收起" />
<input type="button" id="btn2" value="展开" />
<input type="button" id="btn3" value="收起" />
</body>
</html>
jQuery在线API文档：http://jquery.cuishifeng.cn/
jQuery离线API文档：https://www.lanzous.com/i6zz7yh
jQuery笔记归纳的更多相关文章
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- Jquery笔记之第二天
Jquery笔记之第二天 jQuery - 获取内容和属性 获得内容 - text().html() 以及 val() <script> $(document).ready(functio ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- jQuery笔记之 Ajax回调地狱
本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
- JQuery笔记汇总
jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...
- jquery笔记（基础知识）
最近在学jquery,做点小笔记 语法: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p . ...
- 记录前台页面一些jQuery笔记
不知不觉工作两个月了,在这两个月,我成长很快学的很多,刚开始的时候,很多问题不懂,很多技术不会,当然作为实习阶段,很多不会的问题我都会去请教别人,在这里得感谢那些帮助我的人,但是经常去问别人问题,首先 ...
随机推荐
- 零基础Python入门（1）- python安装与预热
大家好,我是jacky,很高兴跟大家分享<Python数据科学之金融行业实操>,今天带大家学习我们这门课的操作工具,就是Python,为什么选用Python来作为金融行业数据科学的工具呢? ...
- 安装cartographer遇到Unrecognized syntax identifier "proto3". This parser only recognizes "proto2"问题
https://stackoverflow.com/questions/38605734/mac-cannot-find-eigen3 https://blog.csdn.net/qq_4214518 ...
- dp之斜率优化
前几天想练练思维,所以从cf上随便找了一道dp题,看完题意后第一感觉很简单,就是简单的区间dp题,但是看到数据范围的我顿时就懵了,(1≤n≤105) emmmmmmmm,按照普通的思路肯定会超时的.. ...
- lucene正向索引（续）——一个文档的所有filed+value都在fdt文件中！！！
4.1.3. 域(Field)的数据信息(.fdt,.fdx) 域数据文件(fdt): 真正保存存储域(stored field)信息的是fdt文件 在一个段(segment)中总共有segment ...
- Xgboost建模
xgboost参数 选择较高的学习速率(learning rate).一般情况下,学习速率的值为0.1.但是,对于不同的问题,理想的学习速率有时候会在0.05到0.3之间波动.选择对应于此学习速率的理 ...
- nodejs取参四种方法 req.body, req.params, req.param, req.body
获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实现. req.body req.query req.params req.param() 首先介 ...
- python 设计模式之策略模式
这几天太忙了,都没空写,所以持续了好几天. 1.策略模式的定义: 策略模式定义了算法族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 通俗的讲,也就是将那些使用的方法 ...
- Faster RCNN论文学习
Faster R-CNN在Fast R-CNN的基础上的改进就是不再使用选择性搜索方法来提取框,效率慢,而是使用RPN网络来取代选择性搜索方法,不仅提高了速度,精确度也更高了 Faster R-CNN ...
- Django中的文件上传和原生Ajax
概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...
- 01.轮播图之五 ：一个 imageView也能 作 轮播
这个是最近才写的,本以为实现起来很有难度,需要更高深的理论, 写完之后,才发现自己错误的离谱: 之所以能用一个imageview 实现轮播 基于两点::: 使用 imageview 的layer 层设 ...