java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）
2024-09-04 02:46:03
1.JQuery：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计 的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2..JQuery的声明：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<!-- jQuery的文件引入，一定要在jQuery代码之前 -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// 第一种声明jQuery的方式
/*$(function(){// jQuery只要定义，就在页面加载完毕后自动触发 });*/ // 第二种声明jQuery的方式
/*$(document).ready(function(){
alert("我是jQuery");
});*/ // 在html中，使用类样式 .
// 使用id样式 #
// 标签样式 直接标签名
// 在jQuery中，同样遵循这个原则
$(function(){// 一旦不写定义jQuery，就无法编写jQuery代码
// 既可以写jQuery代码也可以写js代码
// 但是jQuery代码坚决不能写在$(function(){})的外面
var x = document.getElementById("div1");
// 使用jQuery通过id选择器选中div标签
var div1 = $("#div1");// 得到Object对象，这个对象称之为jQuery对象
alert(div1);
alert(x); var div2 = $("div");
alert(div2); var div3 = $(".div2");
alert(div3); }); </script> </head> <body>
<div class="div2" id="div1" style="width:100px; height:100px; background: red;"></div>
<div class="div2" id="div2" style="width:100px; height:100px; background: red;"></div>
<div class="div2" id="div3" style="width:100px; height:100px; background: red;"></div>
</body>
</html>
3.JS和JQ对象的区别，prop，attr，addClass，offset
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<style type="text/css">
.test {
background: red;
color:red;
}
.test2{
color:green;
}
</style>
<!-- jQuery的文件引入，一定要在jQuery代码之前 -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// JS中获取的对象永远是一个DOM对象，俗称js对象
// 但是jQuery获取的是一个jQuery的对象，Object对象
// attr和prop很重要
$(document).ready(function(){
var x = $("h1"); var x = $("h1");// 获取到所有的h1标签，返回的Object对象，并不是数组
$("h1").each(function(index){
alert(index);// 就是选中标签下标
alert($(this).text());// 循环中的每一个h1标签对象
});
alert(x.length);
for(var i = 0; i < x.length; i++) {
var y = x.get(i);// heading对象(拿到每一个h1标签对象，一个整体------>转换为Document对象，会成为一个js对象)
alert(y.innerHTML);
alert(x.index());// 永远是0？
} alert($("h1").index($("#hh2")));// index返回的是一个整数类型，返回的是某个元素的下标 attr
alert($("#ins").prop("name"));// attr在1.6之前很常用，虽然这个函数没有被废弃，但是在1.6版本以后就被prop所代替了
attr和prop不但可以获取值，也可以赋值
alert($("input").attr("id","12"));
alert($("#12")); $("input").removeAttr("id");// 引出attr addClass：添加样式，类样式
$("span").addClass("test");
$("span").removeClass("test");// 移除样式
$("span").addClass("test2"); alert($("#hh2").css("color"));// css函数获取某个标签的样式的值 alert($("#hh2").offset().left);// 偏移量，说白了坐标 }); </script> </head> <body>
<input type="button" name="我是" value="测试" />
<h1 id="hh" name="hh1">h11</h1>
<h1 id="hh2" style="color:red;">h12</h1>
<h1>h13</h1>
<h1>h14</h1> <span>您的用户名格式错误</span>
<span>您的密码格式错误</span>
</body>
</html>
4.绑定事件，trigger
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<style type="text/css">
.test {
background: red;
color:red;
}
.test2{
color:green;
}
</style>
<!-- jQuery的文件引入，一定要在jQuery代码之前 -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 相当于给input框绑定上onclick事件
// 第一种写法
/*$("input").click(function(){
alert(1111);
});*/
// 第二种写法
$("ul").on("click","li",function(){// 使用on的时候(如果有选择器的话)，必须要存在上下级的关系
// 选中ul给ul绑定点击事件，这个事件作用于li标签--->直接把事件绑定到了li身上
console.log($(this).text());
}); $("#ins1").click(function(){
alert(22222);
}); // 会和你伴随一生
$("#ins1").trigger("click");// 自动触发事件，首先找到id为ins1的input对象，然后触发这个绑定click }); </script> </head> <body>
<input id="ins1" type="button" value="测试" />
<input type="button" value="测试" />
<span id="span1">我是span</span> <ul>
<li>我是li</li>
<li>我是li2</li>
</ul>
</body>
</html>
5.dblclick，change事件
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<style type="text/css">
.test {
background: red;
color:red;
}
.test2{
color:green;
}
</style>
<!-- jQuery的文件引入，一定要在jQuery代码之前 -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> $(function(){
// 所有的jQuery代码都要写在这里
//在js中所有的事件都需要有一个on前缀
//但是在jQuery中，不需要这个on前缀
$("input").dblclick(function(){// 双击
alert("我是dblclick");//double click
});
// 在js中有onsubmit事件---->submit // 当发生改变的时候会调用的函数change
$("#ins1").change(function(){
alert("我是change");
}); }); </script> </head> <body>
<input type="button" value="测试" /><br />
用户名<input type="text" id="ins1" />
</body>
</html>
6.显示隐藏页面效果，hide，show，toggle；slideUp，slideDown，slideToggle
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<style type="text/css">
.test {
background: red;
color:red;
}
.test2{
color:green;
}
</style>
<!-- jQuery的文件引入，一定要在jQuery代码之前 -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"> $(function(){
// 所有的jQuery代码都要写在这里
// 在js中有隐藏和显示，在jQuery中自带隐藏函数
// 里面的参数：隐藏或显示需要的毫秒数，如果不填默认为0
$("#hide").click(function(){
$("div").hide(1000);// 把一个元素隐藏
});
$("#show").click(function(){
$("div").show(1000);// 把一个元素显示
});
$("#show_or_hide").click(function(){
$("div").toggle(1000);// 自动显示隐藏
});
$("#slide_up").click(function(){
$("div").slideUp();
});
$("#slide_down").click(function(){
$("div").slideDown();
}); $("#slide_toggle").click(function(){
$("div").slideToggle();
}); }); </script> </head> <body>
<div style="height: 200px; width: 200px; background: red;"></div>
<input id="hide" type="button" value="隐藏" />
<input id="show" type="button" value="显示" />
<input id="show_or_hide" type="button" value="显示/隐藏" />
<input id="slide_up" type="button" value="隐藏" />
<input id="slide_down" type="button" value="显示" />
<input id="slide_toggle" type="button" value="显示/隐藏" />
</body>
</html>
7.id选择器，标签选择器，类选择器
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
// id选择器，标签选择器，类选择器
// 复杂的选择器：
$(function(){
var test = $("form>input").val();//"form>input"获取form表单下的第一个直接子元素
alert(test);
alert($("label+input").val());// label+input：加号代表是相邻的兄弟元素
var ins = $("label~input");// label~input：~代表所有的兄弟元素
for(var i =0;i < ins.length; i++){
alert(ins.get(i).value);
}
alert($("li:first").text());//:first 选择出第一个元素 alert($("input:not(#test2)").val());// :not 排除某个元素(可以使用选择器进行选择) $("tr:even").css("background-color","red");// :even 选中所有下标为偶数的元素，实际上选中的为奇数行
$("tr:odd").css("background-color","yellow");// :odd 选中所有下标为奇数的元素，实际上是选中的偶数行 eq:eqauls相等
gt:great than 大于
lt:less than 小于
$("tr:lt(0)").css("background-color","black");// 最小要大于0 $("tr:last").css("background-color","blue");// 选中最后一个元素 $("td:empty").css("background-color", "pink");// 选择文本为空的元素 $("td:contains(22)").css("background-color", "grey");// 选中所有文本带22的元素 $("tr:has(td)").css("background-color", "purple");// 选中包含某个元素的所有元素(选中所有包含td的tr元素) $("td:parent").css("background-color","red");// 选中某个标签的直接父级标签 alert($("tr:hidden").text());// 选中隐藏的元素 alert($("tr:visible").text());// 选中所有可见的元素 $("input[name='test2']").prop("checked", true);// 选中所有name为test2的input标签 alert($("tr td:first-child").text());// 选中第一个子元素
alert($("tr td:last-child").text());// 选中最后一个子元素 });
</script> </head> <body>
<form>
<input type="" value="ins1" name="ins1" />
<input type="" value="ins2" name="ins2" />
<select>
<option>我是select</option>
<input type="" value="ins3" name="ins3" />
</select>
</form> <form>
<label>Name:</label>
<input name="name" value="1" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="2" />
</fieldset>
<input name="none" value="3" />
</form> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> <form>
<input id="test2" type="" name="ins1" value="1">
<input class="test1" type="" name="ins2" value="2">
</form>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr style="display: none;">
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table> <form>
<input type="checkbox" name="test1" />男
<input type="checkbox" name="test1" />女
<input type="checkbox" name="test1" />保密
<input type="checkbox" name="test1" />未知
<input type="checkbox" name="test2" />呵呵
</form> </body> </html>
8.表单内标签的获取
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script> $(function(){
// 在jQuery中，只要是表单中的标签，所有都为input
$(":input").val();// :input 获取所有的input，包括button，select，textarea，input
$(":text").val();// :text 选中所有type="text"的input
$(":enabled").val();// DIY选择出自然顺序一个能够输入的input框 });
</script> </head> <body>
<h1>登录功能</h1>
<form>
用户名：<input type="text" name="uname" disabled="disabled" /><br />
密码：<input type="password" name="uname" /> <br />
<input type="submit" value="提交" /> </form>
</body> </html>
9.三张图片的放大与缩小：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="text/html">
<title></title>
<style type="text/css">
.img_class {
width: 400px;
height: 400px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 第一步：给图片绑定点击事件
// 第二步：获取到图片的src值，并且赋值给需要方法的img标签
// 第三步：把隐藏div需要显示出来
// 第四步：点击关闭按钮的时候，重新隐藏div
$(".img_class").click(function(){
var srcValue = $(this).attr("src");
$("#show_img").attr("src", srcValue);
var setValue = $("#tbl").offset();// 获取偏移量，说白了也就是坐标(只有left和top)
$("#show_div").attr({"left":setValue.left, "top":setValue.top});
$("#show_div").show(1000);
}); $("#close_img").click(function(){
$("#show_div").hide(1000);
});
}); </script>
</head>
<body>
<div id="show_div" style="position: absolute; display: none;">
<input id="close_img" type="button" name="" value="关闭"><br />
<img id="show_img" style="width: 800px;height: 700px;" src="">
</div>
<table id="tbl">
<tr>
<td><img class="img_class" src="img/1.jpg"></td>
<td><img class="img_class" src="img/2.jpg"></td>
<td><img class="img_class" src="img/3.jpg"></td>
</tr>
</table>
</body>
</html>
10.Other：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
<style type="text/css">/* 就近原则 */
.odd {/* 偶数行样式 */
background-color: red;
}
.even {/* 奇数行 */
background-color: blue;
}
.selected {
background-color: black;
color:white;
}
.cars {
display: none;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
// 隔行变色:odd
// :odd 偶数行和:even 奇数行
/* $("tr:odd").css("background-color", "red");
$("tr:even").css("background-color","blue");*/
// 需求：高亮显示
$("tbody tr:contains('信阳')").addClass("selected");
// 需求：标题不能改变颜色
$("tbody tr:odd").addClass("odd");// 添加的是一个行内样式
$("tbody tr:even").addClass("even"); $("#show_hide").click(function(){
$(".cars").toggle();
}); }); </script> </head> <body>
<table border="1"> <tbody>
<tr id="show_hide">
<td><b>汽车</b></td> </tr>
<tr class="cars">
<td>G151</td> </tr>
<tr class="cars">
<td>G152</td> </tr>
<tr class="cars">
<td>G153</td> </tr>
</tbody>
</table>
</body>
</html>
最新文章
- UP Board 超详细开箱评测
- 如何让一个DIV浮动在另一个DIV上面
- Matlab命令系列之目录操作
- I.MX6 U-boot GPIO hacking
- LIS
- Camera图像处理原理及实例分析-重要图像概念
- 【转】LINUX系统I/O复用技术之二：poll() -- 不错
- 如何当好党支部书记 z
- phpcms 标签解析
- Dao 处理
- Amazon S3 API
- 王立平--string.Empty
- 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者
- （转载）基于Bash命令行的百度云上传下载工具
- Java面试题复习笔记（框架）
- yield的表达式形式与内置函数
- 15. 3Sum (JAVA)
- Android 读写权限，已经授权情况下，仍然(Permission denied)
- Android SDK无法更新的解决方法
- （转）Kangle配置文件