java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）
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>
java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）的更多相关文章
- Jquery学习笔记（1）--JQuery原理，与JS对象互换，核心函数
js对象转jQuery对象,$('num'), jQuery对象转js对象,$('num')[0],或$('num').get(0). 1.点击换行,each(),html(),attr(),每个h1 ...
- 理清JS数组、json、js对象的区别与联系
最近在敲代码时,遇上了一个关于JS数组的问题,由此引发了关于对象和json的联想,曾经觉得很畅顺的知识点突然模糊了.于是,为了理清这些东西,有了如下这篇文章.觉得没问题的猿们可以当复习,而那些带着疑问 ...
- JSON 与 JS 对象的区别与对比
定义: JSON是什么?JSON是JS的一种简单数据格式,JSON是JavaScript原生格式,它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号. 问题: ...
- JSON与JS对象的区别
<script> var obj2={};//这只是JS对象 var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的 对象 */ var ...
- [Swift通天遁地]三、手势与图表-(3)通过捏合手势放大和缩小图像视图
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- Java如何声明变量？JS如何声明变量？
Java采用强类型变量检查,像C语言一样.所有变量在编译之前必须声明,而且不能使用没有赋值的变量.例如:int x;x=1234;char y='F';其中X=1234说明是一个整数,Y='F'说明是 ...
- Jquery Mobile开发以及Js对象动态绑定
动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...
- java实现面向对象和javaScript基于对象的区别&java垃圾回收机制和其他编程语言的比较
java javaScript javaGC和C语言内存分配和内存释放
随机推荐
- Codeforces Round #581 (Div. 2) C. Anna, Svyatoslav and Maps （Floyd 算法，最短路）
C. Anna, Svyatoslav and Maps time limit per test2 seconds memory limit per test256 megabytes inputst ...
- RocketMQ和Kafka的差异对比
Broker差异 主从差异: kafka的master/slave是基于partition维度的,而rocketmq是基于broker维度的:kafka的master/slave是可以切换的,而roc ...
- C++之++操作符重载
++ 运算符,还可分为前缀 ++ 和后缀 ++ 运算符. 重载前缀++运算符 C++ 允许重载前缀运算符,以使表达式 ++b 能递增 b 的长度值,并返回结果对象.该运算符可以作为成员函数来重载,这使 ...
- buuctf@reverse1
flag{hell0_w0rld}
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题
关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...
- 字符串分割SplitString
C/C++中常用的字符串切割函数有strtok.strtok_s与strtok_r. 1.strtok函数 char* strtok(char* str, const char* delim); 分解 ...
- cdh-完整
安装包 CLOUDERA管理安装包 http://archive.cloudera.com/cm5/cm/5/ http://archive.cloudera.com/cm5/cm/5/clouder ...
- C# AVI Image 转换
AVI视频库 http://download.csdn.net/download/qc_id_01/9970151 Avi视频文件的编码有很多,这个库只支持部分Avi文件,有些Avi文件不支持,具体哪 ...
- vue实现v-model父子组件间的双向通信
首先讲清楚有个缺点:父页面若同时使用多个子组件,永远只会只能实现第一个双向驱动,我是新手,还在研究.如果有高手请指教,感谢! 子组件 <script> export default { m ...
- datetime模块的常用总结
datetime模块 datetime模块提供了一些处理日期和时间的标准库.常用的有 datetime timedelta timezone 构造一个datetime对象 datetime() dat ...