day04-jQuery
jQ宗旨：write less do more
jq是js的框架，底层封装了js代码。
jq引入：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
jQ选择器：推荐第一种：
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<body>
<script>
function run(){
//alert($("#xi").val());
alert(jQuery("#xi").val());
}
</script>
<input type="text" value="西游记" id="xi"/><br />
<input type="button" value="获取id为xi的值" onclick="run()" />
</body>
jQ对象和js对象的互转：
JS对象转jq：var jq = $(js对象);
JQ对象转js： var js = jq[0];或者jq.get(0); 因为jQ本质上是一个js数组
jQ页面加载完成时执行的代码：
<script>
$(document).ready(function(){
//页面加载完成时需要执行的代码
})
$(function(){
//页面加载完成时需要执行的代码
//推荐这一种
})
</script>
jQ基本选择器：
ID选择器：$("#id");
类选择器：$(".类名");
元素选择器：$("元素名");
jQ数组遍历的两种方式：
1.$(数组).each(function(index){
alert(this+index);
})
2. $.each($(arr)，function（）{});
案例一：重写弹出广告
知识点：jQ动画效果：
jQuery的隐藏和显示相对JS更为动感圆滑。
<style>
#d1{
background-color:lightskyblue;
width:300px;
height:300px;
}
</style>
<script>
//展示
function run1(){
//1.选中要显示的元素对象
var v1 =$("#d1");
//滑动效果
//v1.show(2000)
v1.slideDown(2000);
// v1.fadeIn(2000,function(){
// alert("展示成功！！")
// });
}
//隐藏
function run2(){
//1.选中要隐藏的元素对象
var v2 = $("#d1");
v2.hide(3000);
//v2.slideUp(3000);
// v2.fadeOut(3000,function(){
// alert("隐藏成功！！")
// });
}
//切换显示/隐藏
function run3(){
//1.选中要隐藏的元素对象
var v2 = $("#d1");
//v2.toggle(3000);
//v2.slideToggle(3000);
v2.fadeToggle(3000,function(){
alert("切换成功！！")
})
}
</script>
<div id="d1"></div>
<input type="button" value="显示" onclick="run1()"/>
<input type="button" value="隐藏" onclick="run2()"/>
<input type="button" value="切换显示/隐藏" onclick="run3()"/>
</body>
案例实现显示，隐藏广告：
<body>
<img src="../img/3.jpg" width="100%" style="display: none;"/> <script>
//页面加载完成时执行
$(function(){
//两秒后弹出广告
setTimeout("show()",2000);
})
function show(){
// 选中改图片
var ad =$("img");
//展示（滑动效果）；
ad.slideDown(2000,function(){
//两秒后再隐藏
setTimeout("hide()",2000);
});
}
function hide(){
var ad = $("img");
ad.slideUp(2000);
}
</script>
</body>
一.1层级选择器：
A B 获得A元素内部的所有的B元素。 （子子孙孙）
A>B 获得A元素下面的所有B子元素。 儿子
A+B 获得A元素同级下一个B元素 下面的第一个兄弟
A~B 获得A元素之后的所有B元素 所有的弟弟
<body>
<script>
$(function(){
//1、获取id为main的span标签 内 所有的div标签
var arr1= $("#main div"); // jq对象
$(arr1).each(function(index){
alert($(this).text()+".."+index);
})
//2、获取id为main的span标签 内 子元素div标签
var arr2 =$("#main>div");
$(arr2).each(function(index){
alert($(this).text()+".."+index);
})
// 3、获取id为main的span标签 后 第一个div兄弟标签
var arr3 = $("#main+div");
$(arr3).each(function(index){
alert($(this).text()+".."+index);
})
//4、获取id为main的span标签 后 所有的div兄弟标签
var arr4 = $("#main~div");
$(arr4).each(function(index){
alert($(this).text()+".."+index);
})
});
</script>
<span id="main">
<div>111111</div>
<div>222222</div>
<div>333333</div> <span>
<div>44444</div>
</span>
</span>
<div>55555</div> <span>
<div>66666</div>
</span> <div>77777</div>
</body>
一.2 属性选择器：
[属性名] 获得有 指定属性名 的标签对象。
[属性名=值] 获得 指定属性名等于指定值 的标签对象 value = man
[属性名*=值] 获得 指定属性名 含有 指定值 的标签对象 value *= a
[属性值$='.jpg'] 所有的属性名包含以".jpg"结尾的元素。
多个属性选择器可以组合使用 ：[选择器1][选择器2][选择器3]
实例：
<script>
$(function(){
//1、获取所有存在type属性的标签
var arr1 = $("[type]");
$(arr1).each(function(index){
alert(this.value+".."+index);
})
2、获取所有type属性为radio的标签
var arr2=$("[type=radio]")
$(arr2).each(function(index){
alert(this.value+".."+index);
})
3、获取所有type属性含有o的标签
var arr3 = $("[type*=o]");
$(arr3).each(function(index){
alert(this.value+".."+index);
})
//4、获取所有input标签中的单选框，且name为sex的标签
var arr4 = $("input[type=radio][name=sex");
$(arr4).each(function(index){
alert($(this).val()+".."+index);
})
});
</script>
用户名：<input type="text" name="uname" value="小刘"/><br />
密码：<input type="password" name="pwd" value="123"/><br />
性别：
<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女<br />
是否VIP：<input type="radio" name="vip" value="no" />不是
<input type="radio" name="vip" value="yes" />是<br />
</body>
一.3 基本过滤选择器：
:first 第一个
:last 最后一个
:even 偶数，索引从 0 开始计数
:odd 奇数
:not(..) 除了指定内容 1234 : not(12) == > 34
:eq(index) 获取指定索引的元素
:gt(index) 大于index索引的元素
:lt(index) 小于index索引的元素
<html>
<!--在获取到一系列标签对象之后，的一些筛选条件。-->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
</head>
<body>
<script>
$(function(){ //1、在所有DIV标签中，获取第一个div
//alert($("div:first").html());
//alert($("div:eq(0)").html());
//2、在所有DIV标签中，获取最后一个div
//alert($("div:last").html());
//3、在所有DIV标签中，获取所有偶数位的div
var arr1 = $("div:even");
$(arr1).each(function(index){
alert($(this).html()+".."+index);
})
//4、在所有DIV标签中，获取所有奇数位的div
var arr2 = $("div:odd");
$(arr2).each(function(index){
alert($(this).html()+".."+index);
})
//5、在所有DIV标签中，获取除了第一位以外所有的div
var arr3 = $("div:not(div:first)");
$(arr3).each(function(index){
alert($(this).html()+".."+index);
})
//6、在所有DIV标签中，获取索引等于1的div
alert($("div:eq(1)").html());
//7、在所有DIV标签中，获取索引大于1的div
var arr4 = $("div:gt(1)");
$(arr4).each(function(index){
alert($(this).html()+".."+index);
})
//8、在所有DIV标签中，获取索引小于1的div
var arr5 = $("div:lt(1)");
$(arr5).each(function(index){
alert($(this).html()+".."+index);
})
})
</script>
<div>11111111，索引是0</div>
<div>22222222，索引是1</div>
<div>33333333，索引是2</div>
<div>44444444，索引是3</div>
<div>55555555，索引是4</div>
<div>66666666，索引是5</div>
<div>77777777，索引是6</div>
<div>88888888，索引是7</div>
</body>
</html>
一.4表单属性选择器:
:checked 选中 ,是单选，复选 的选中
:selected 选择 ，是下拉列表中的算则。
:enabled 可用
:disabled 不可用。
<script>
$(function(){
//获取可用的表单输入项
var arr1 = $("input:enabled");
alert(arr.length);
$(arr).each(function(index){
alert($(this).val()+index)
})
获取不可用的表单输入项
var arr2 =$("input:disabled");
$(arr).each(function(){
alert($(this).val());
})
获取选中的复选框
var arr3=$("[type=checkbox]:checked")
alert(arr3.length)
$(arr3).each(function(){
alert($(this).val());
})
//获取国家下拉框中，被选中的option
var arr4=$("#country>option:selected");
$(arr4).each(function(){
alert($(this).val());
})
});
</script>
<h1>不可用的表单输入项</h1>
<input type="text" disabled="disabled" />
<input type="button" value="不可用按钮" disabled="disabled" />
<h1>复选框</h1>
<input type="checkbox" name="hobby" value="code"/>编程
<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
<hr />
<h1>下拉选择框</h1>
城市：<select id="city">
<option value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<hr />
国家：<select id="country" multiple="multiple">
<option value="China" selected="selected">中国</option>
<option value="America" selected="selected">美国</option>
<option value="Russia">俄罗斯</option>
<option value="England">英国</option>
</select>
案例二：隔行换色：
addClass(“值”) 给元素对象追加样式
removeClass() 将元素对象的class删除
代码实例如下：
<style>
.sss{
background: lightseagreen;
}
</style>
<script>
$(function(){
$("tr:not(0):odd").addClass("sss");
})
</script>
<body>
<body onload="changeColor()">
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" value="全选" onclick="fun2()"/>
<input type="button" value="全不选" onclick="fun3()"/>
<input type="button" value="反选" onclick="fun4()"/>
</th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table> </body>
</html>
案例三：全选，全不选：
知识点1.数组遍历：
<script>
var arr =["三国演义","西游记","红楼梦","水浒传"];
//jQ遍历第一种方式：
$(arr).each(function(index){
//索引
// alert(index);
//元素
//alert(arr[index]);
//alert(this);
alert("元素为："+this+"，索引为："+index);
});
//jQ遍历方式第二种
$.each($(arr),function(index){
alert("元素为："+this+"，索引为："+index);
} );
</script>
知识点2：prop（） 和
prop("属性名"); （attr(“属性名”)） 获取某个属性名对应的值 == $(“#bb”).val(); 这两种获取属性的值
prop("属性名",属性值); （attr("属性名",属性值);） 将其属性名设置为某个属性值 == $(“#bb”).val(“值”);
removeProp("属性名"); 这个可能版本会不兼容， == removeProp不兼容可用 后面这个代替 移除改属性 removeAttr(“属性名”);
实现反选 ：案例
<script>
function quan(){
$(".itemSelect").prop("checked",true);
}
function bu(){
$(".itemSelect").prop("checked",false);
}
// function fan(){
//
// //获取所有的复选框，将其checked修改为false
// var arr1 =$(".itemSelect:checked");
// //获取所有的未选中复选框，将其checked修改为true
// var arr2 =$(".itemSelect:not(.itemSelect:checked)");
// arr1.prop("checked",false);
// arr2.prop("checked",true);
// }
//用jQ数组实现反选
function fan(){
var arr =$(".itemSelect");
//遍历
arr.each(function(){
var temp = $(this).prop("checked");
//取反
$(this).prop("checked",!temp);
})
}
</script>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input type="button" value="全选" onclick= "quan()"/>
<input type="button" value="全不选" onclick= "bu()"/>
<input type="button" value="反选" onclick= "fan()"/>
</th>
<th>编号</th>
<th>姓名</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>1</td>
<td>唐三藏</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>悟空</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>八戒</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>沙和尚</td>
</tr>
</table>
</body>
案例四：省市二级联动：
jQ中的事件实现方式：
<input type="text" id="uname" value="黄蓉" /><br />
<input type="button" value="点击获取输入框的value值" id="aaa"/>
<input type="button" value="点击设置输入框的value值" id="bbb"/>
<script>
$(function(){
//jQ中的事件获取格式
$("#aaa").click(function(){
alert($("#uname").val());
})
//jQ中的事件获取格式
$("#bbb").click(function(){
$("#uname").val("郭靖");
})
})
jQ中追加元素的两种方式；
<ul id="rank">
<li>Php</li>
<li>Android</li>
<li>Ios</li>
</ul>
<hr />
<input type="button" value="列表尾部追加Java" id="aaa"/>
<input type="button" value="列表头部追加Java" id="bbb"/>
<script>
$(function(){
//尾部追加
$("#aaa").click(function(){
//往哪儿追加
var ul = $("#rank");
//追加什么
var li = "<li>JAVA</li>";
//追加什么动作（方法）
//ul.append(li);
$(li).appendTo(ul);
})
//头部追加
$("#bbb").click(function(){
//往哪儿追加
var ul = $("#rank");
//追加什么
var li = "<li>JAVA</li>";
//追加什么动作（方法）
//ul.prepend(li);
$(li).prependTo(ul);
})
})
</script>
省市联动代码案例实现：
追加思路：先获取往哪儿追加的值，再获取追加什么，再初始化往哪儿追加的内容体，如果是数组就遍历，得出值，然后用相应的追加方法追加。
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
</script>
</head>
<body>
<select id="province" onchange= "changeCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select> <script>
function changeCity(val){
//根据var获取省份对应的下标
var arr = cities[val];
//往哪儿加
var city =$("#city");
//恢复到初始
city.html("<option value=''>---请-选-择-市---</option>");
$(arr).each(function(){
//加什么？
var temp ="<option value=''>"+this+"</option>";
//追加的方法
city.append(temp);
})
}
</script>
案例五：列表左右选择
这种下拉列表：主要应用下拉列表的选取和所有的方法做题。
案例实现：
<body>
<select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;">
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
<option>左5</option>
</select>
<input type="button" value="》" id="a"/>
<input type="button" value="》》" id="b"/>
<input type="button" value="《" id="c" />
<input type="button" value="《《" id="d"/>
<select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;">
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
<option>右5</option>
</select>
<hr />
<script>
$(function(){
//1.将左边选中的追加到右边末尾
$("#a").click(function(){
//往哪儿追加
var right = $("#rightSelectId");
//追加什么？
var leftcont = $("#leftSelectId option:selected");
//追加方法
right.append(leftcont);
})
//1.将左边所有的追加到右边末尾
$("#b").click(function(){
//往哪儿追加
var right = $("#rightSelectId");
//追加什么？
var leftcont = $("#leftSelectId option");
//追加方法
right.append(leftcont);
})
//1.将右边选中的追加到左边末尾
$("#c").click(function(){
//往哪儿追加
var left = $("#leftSelectId");
//追加什么？
var rightcont = $("#rightSelectId option:selected");
//追加方法
left.append(rightcont);
})
//1.将右边所有的追加到左边末尾
$("#d").click(function(){
//往哪儿追加
var left = $("#leftSelectId");
//追加什么？
var rightcont = $("#rightSelectId option");
//追加方法
left.append(rightcont);
})
})
</script>
</body>
！！！！！！！好累！！！！！！！！！！！！！！！！！！继续坚持！！！！！！！！！！！！！！！！！！！！！！！
jQ 就是啰嗦点 但是难度还好 加油就ok！！！
day04-jQuery的更多相关文章
- day-04(jquery)
回顾: js: 组成部分: ECMAScript BOM DOM 变量声明 var 变量名=初始化值; 数据类型: 原始类型 Undefined Null String Number Boolean: ...
- 《jQuery精品教程视频》视频目录
\day01\03-视频\02-使用js的缺点.avi; \day01\03-视频\03-jQuery初体验.avi; \day01\03-视频\04-什么是jQuery.avi; \day01\03 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- day04 orm操作
day04 orm操作 昨日内容回顾 小白必会三板斧 request对象方法 静态文件 请求方式 python链接数据库 django链接数据库 小白必会三板斧 HttpResponse :返回前端浏 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
随机推荐
- shell定义
用户输入的命令并且把它们送到内核.不仅如此,Shell有自己的编程语言用于对命令的编辑,它允许用户编写由shell命令组成的程序. Shell编程语言具有普通编程语言的很多特点 无图形化界面时与lin ...
- servlet3.0无web.xml
大家应该都已经知道spring 3.1对无web.xml式基于代码配置的servlet3.0应用.通过spring的api或是网络上高手们的博文,也一定很快就学会并且加到自己的应用中去了.PS:如果还 ...
- java链接Mysql出现警告：Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by
Java使用mysql-jdbc连接MySQL出现如下警告: Establishing SSL connection without server's identity verification is ...
- Java连接MQTT服务-ws方式
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- windows spark1.6
jdk1.7 scala 2.10.5 spark 1.6.1 http://spark.apache.org/downloads.html hadoop 2.6.4 只需要留bin https:// ...
- note: Spanner: Google’s Globally-Distributed Database
1. Abstract & introduction ref:http://static.googleusercontent.com/media/research.google.com/zh- ...
- SAP MaxDB Backup and Restore
Back up the data and redo log entries from the data and log areas of your database to data carriers ...
- 常用javaScript小常识
javascript数据类型强制转换 一.转换为数值类型 Number(参数) 把任何的类型转换为数值类型 A.如果是布尔值,false为0,true为1 B.如果是数字,转换成为本身.将无意义的后导 ...
- 通过实例聊聊Java中的多态
Java中的多态允许父类指针指向子类实例.如:Father obj=new Child(); 那么不禁要发问?? 使用这个父类型的指针访问类的属性或方法时,如果父类和子类都有这个名称的属性或方法,哪 ...
- flutter tabbar创建与显示
效果图 main.dart import 'package:flutter/material.dart'; import 'pages/index_page.dart'; void main() =& ...