一.JQuery介绍及其特点
1、什么是jQuery
jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。
2、jQuery的特点
支持各种主流的浏览器。
使用特别简单
拥有便捷的插件扩展机制和丰富的插件
3、使用jquery
引入jQuery文件
jQuery的封装原理
jQuery的选择器
jQuery操作元素的属性
jQuery操作元素的样式和内容
jQuery操作元素的文档结构
jQuery中的事件
jQuery中的动画效果。
案例二.JQuery封装原理
<html>
<head>
<title>jquery的封装原理</title>
<meta charset="UTF-8"/>
<!--引入外部声明的js文件-->
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
function test(){
alert("我是test");
}
var bjsxt=123;
//闭包原理:在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
function testA(){
function test2(){
test2.name="张三";
var n=999;
alert(bjsxt);
return n;
}
return test2;
}
</script>
</head>
<body>
<h3>jquery的封装原理</h3>
<hr />
<input type="button" name="" id="" value="测试test" οnclick="bjsxt.test()"/>
<ul>
<li>1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。</li>
<li>2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。</li>
<li>3、使用工厂模式,将代码进行封装，但是并没有解决问题</li>
<li>4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。</li>
<li>5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取</li>
<li>6、使用闭包,将数据一次性挂载到window对象下</li>
</ul>
</body>
</html>三.JQuery选择器
<html>
<head>
<title>jquery的选择器</title>
<meta charset="UTF-8"/>
<!--
jquery的选择器学习：
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
表单选择器
注意：
jQuery中选择器获取的是存储了HTML元素对象的数组。
jquery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。
-->
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
//id选择器
function testId(){
//jquery--id
var inp=$("#uname");
alert(inp.val());
}
//标签选择器
function testEle(){
var inps=$("input");
alert(inps[1].value);
}
//类选择器
function testClass(){
var inps=$(".common");
alert(inps.length);
}
//组合选择器：
function testAll(){
var eles=$("h3,input");
alert(eles.length);
}
//测试子选择器
function testChild(){
var inps=$("#showdiv>input");
alert(inps.length);
}
//测试层级选择器
function testCj(){
var inp=$("input:first");
alert(inp.val());
}
function testCj2(){
var tds=$("td:not(td[width])");
alert(tds.html());
}
</script>
<style type="text/css">
.common{}
div{
width: 300px;
height: 100px;
border: solid 2px orange;
}
</style>
</head>
<body>
<h3>jquery的选择器</h3>
<input type="button" name="" id="" value="测试id" οnclick="testId()" class="common"/>
<input type="button" name="" id="" value="测试标签选择器" οnclick="testEle()"/>
<input type="button" name="" id="" value="测试类选择器" οnclick="testClass()"/>
<input type="button" name="" id="" value="测试组合选择器" οnclick="testAll()"/>
<hr />
用户名: <input type="text" name="uname" id="uname" value="张三" class="common"/>
<hr />
<input type="button" name="" id="" value="测试子选择器" onClick="testChild()" />
<input type="button" name="" id="" value="测试层级选择器--first" onClick="testCj()" />
<input type="button" name="" id="" value="测试层级选择器--not" onClick="testCj2()" />
<hr />
<div id="showdiv">
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</div>
<div id="">
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</div>
<table border="1px" height="200px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>四.Jquery操作元素属性
<html>
<head>
<title>jQuery操作元素的属性</title>
<meta charset="UTF-8"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jQuery操作元素属性：
获取:
对象名.attr("属性名") //返回当前属性值
注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。
修改
对象名.attr("属性名","属性值");
-->
<!--声明js代码域-->
<script type="text/javascript">
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
</script>
</head>
<body>
<h3>jquery操作元素属性</h3>
<input type="button" name="" id="" value="测试获取元素属性" onClick="testField()" />
<input type="button" name="" id="" value="测试修改元素属性" onClick="testField2()" />
<hr />
用户名:<input type="text" name="uname" id="uname" value="哈哈" />
</body>
</html>五.JQuery操作元素内容
<html>
<head>
<title>操作元素HTML</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jquery 操作元素内容学习：
获取元素对象
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析
-->
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function testHtml(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
function testHtml2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.html(showdiv.html()+"<i>今天天气真好，适合抓鬼子</i>");
}
function testText(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素内容
alert(showdiv.text());
}
function testText2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.text("<i>今天天气真好，适合抓鬼子</i>");
}
</script>
</head>
<body>
<h3>操作元素HTML</h3>
<input type="button" name="" id="" value="测试获取元素内容--html()" onClick="testHtml()" />
<input type="button" name="" id="" value="测试修改元素内容--html()" onClick="testHtml2()" />
<input type="button" name="" id="" value="测试获取元素内容--text()" onClick="testText()" />
<input type="button" name="" id="" value="测试修改元素内容--text()" onClick="testText2()" />
<div id="showdiv">
<b>皇军，前面有八路的干活</b>
</div>
</body>
</html>
六.JQuery操作元素样式
<html>
<head>
<title>操作元素样式</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
.common{
width: 300px;
height: 300px;
border: solid 1px;
background-color: blueviolet;
}
.dd{
font-size: 30px;
font-weight: bold;
}
</style>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jquery操作元素的样式
1、使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用json传参，提升代码书写效率。
2、使用addClass()
对象名.addClass("类选则器名")//追加一个类样式
对象名.removeClass("类选择器 名")//删除一个指定的类样式
-->
<!--声明js代码域-->
<script type="text/javascript">
//jQuery操作样式---css()
function testCss(){
//获取元素对象
var showdiv=$("#showdiv");
//操作样式--增加
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
function testCss2(){
//获取元素对象
var div=$("#div01");
//操作样式
div.css({"border":"solid 1px","width":"300px","height":"300px"});
}
//jquery操作样式--addClass()
function testAddClass(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("common");
}
function testAddClass2(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("dd");
}
function testRemoveClass(){
//获取元素对象
var div=$("#div01");
//删除元素样式
div.removeClass("dd");
}
</script>
</head>
<body>
<h3>操作元素样式</h3>
<input type="button" name="" id="" value="操作样式---css()" onClick="testCss()" />
<input type="button" name="" id="" value="操作样式---css()--json" onClick="testCss2()" />
<input type="button" name="" id="" value="操作样式---addClass()" onClick="testAddClass()" />
<input type="button" name="" id="" value="操作样式---addClass()--2" onClick="testAddClass2()" />
<input type="button" name="" id="" value="操作样式---removeClass" onClick="testRemoveClass()" />
<hr />
<div id="showdiv">
</div>
<div id="div01" class="common dd">
我是div01
</div>
</body>
</html>七.JQuery操作文档结构
<html>
<head>
<title>操作文档结构</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
操作文档结构学习：
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
-->
<!--声明js代码域-->
<script type="text/javascript">
//内部插入
function testAppend(){
//获取元素对象
var div=$("#showdiv");
//使用内部插入
div.append("<i>，饭</i>");
}
function testAppendTo(){
//获取元素对象
var div=$("#showdiv");
//使用appendTo()
$("#u1").appendTo(div);
}
function testPrepend(){
//获取元素对象
var div=$("#showdiv");
//使用prepend()
div.prepend("<i>你好，</i>");
}
//外部插入
function testAfter(){
//获取元素对象
var div=$("#showdiv");
//使用after外部插入
div.after("<b>今天天气不错，适合学习</b>");
}
function testBefore(){
//获取元素对象
var div=$("#showdiv");
//使用before外部插入
div.before("<b>今天天气不错，适合学习</b>")
}
function testEmpty(){
$("#showdiv").empty()
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 3px orange;
}
</style>
</head>
<body>
<h3>操作文档结构</h3>
<input type="button" name="" id="" value="测试append" onClick="testAppend()" />
<input type="button" name="" id="" value="测试appenTo" onClick="testAppendTo()" />
<input type="button" name="" id="" value="测试prepend" onClick="testPrepend()" />
<hr />
<input type="button" name="" id="" value="测试after" onClick="testAfter()" />
<input type="button" name="" id="" value="测试before" onClick="testBefore()" />
<input type="button" name="" id="" value="测试删除--empty()" onClick="testEmpty()" />
<hr />
<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
<div id="showdiv">
<b>今天中午吃什么</b>
</div>
</body>
</html>八.JQuery事件机制、
<html>
<head>
<title>操作事件</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jQuery动态操作事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意：
js中的是一次添加，多次添加时覆盖的效果
jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
元素对象.unBind("事件名")//移除指定的元素对象的指定事件
注意：js方式添加的事件不能移除。
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
注意：可以给事件添加多个一次函数，unBind可以用来解绑
页面载入事件
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
-->
<!--声明js代码域-->
<script type="text/javascript">
//js动态添加事件
function testThing(){
//获取元素对象
var btn=document.getElementById("btn2");
//添加事件
btn.οnclick=function(){
alert("我是js方式");
}
}
//jquery
//测试bind绑定
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
}
//测试unBind解绑
function testUnfBind(){
$("#btn3").unbind("click");
}
//测试one
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入事件
//js方式
window.οnlοad=function(){
alert("我是js方式页面加载");
}
window.οnlοad=function(){
alert("我是js方式页面加载2222");
}
//jquery方式
$(document).ready(function(){
alert("我是jQuery");
})
$(document).ready(function(){
alert("我是jQuery22222");
})
</script>
</head>
<body>
<h3>操作事件</h3>
<input type="button" name="" id="" value="测试js动态添加事件" onClick="testThing()"/>
<input type="button" name="" id="" value="测试jquery动态添加事件--bind" onClick="testBind()"/>
<input type="button" name="" id="" value="测试jquery动态解绑事件--unbind" onClick="testUnfBind()"/>
<input type="button" name="" id="" value="测试jquery动态解绑事件--one" onClick="testOne()"/>
<hr />
<input type="button" name="" id="btn" value="测试js" />
<input type="button" name="btn2" id="btn2" value="测试jQuery-bind" />
<input type="button" name="btn2" id="btn3" value="测试jQuery-one" />
</body>
</html>九.JQuery动画效果
<html>
<head>
<title>动画效果</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--声明css代码域-->
<style type="text/css">
#showdiv{
height: 300px;
background-color: orange;
display: none;
}
#div01{
height: 300px;
background-color:#8A2BE2;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
function test(){
$("#showdiv").show(3000);
$("#div01").hide(3000);
/*$("#showdiv").hide(3000);
$("#div01").show(3000);*/
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);
}
</script>
</head>
<body onLoad="test()">
<div id="showdiv">
</div>
<div id="div01">
</div>
</body>
</html>十、JQuery操作表格
<html>
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--
jQuery学习的内容：
1、jQuery的封装原理（闭包，匿名自调用）
2、jQuery的选择器
3、jQuery操作元素的属性、内容、样式、文档结构
4、jQuery中的事件
5、jQuery中的动画
注意：
一定不要二合一操作
js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动
HTML用来格式化展示信息
CSS用来增加网页样式
都是由浏览器解析执行的
注意：
所有的网页都是存储在服务器端，运行在浏览器端。
所有的网页都是服务器实时的根据请求发送给浏览器执行的。
所有的网页数据可以实现动态的拼接。
-->
<!--
1、jquery操作checkbox
操作checkbox的选择状态使用prop()方法
prop("checked")//返回选择的状态，选择返回true,未选返回false
prop("checked",true)//置为选择状态
prop("checked",false)//置为未选状态
使用each进行遍历
对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
this表示js对象
$(this)表示jQuery对象
parents("标签名")//获取指定的上级元素对象
parent()
2、jQuery操作表格
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//实现全选
$(function(){
//给按钮绑定单击事件
$("#btn1").click(function(){
//实现全选
$("input[type='checkbox']").prop("checked",true);
});
})
//实现取消选择
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//实现全不选
$("input[type='checkbox']").prop("checked",false);
})
})
//反选
$(function(){
//给按钮绑定事件
$("#btn3").click(function(){
$("input[type='checkbox']").each(function(){
//alert(this.checked);
$(this).prop("checked",!$(this).prop("checked"));
})
})
})
//选择奇数行
$(function(){
$("#btn4").click(function(){
$("input[type=checkbox]:odd").prop("checked",true)
})
})
//隔行变色
$(function(){
$("#btn5").click(function(){
$("tr:odd").css("background-color","orange");
})
})
//删除选中的行
$(function(){
$("#btn6").click(function(){
$(":checkbox:checked").parents("tr").remove();
})
})
//添加行---操作文档结构
$(function(){
$("#btn7").click(function(){
$("tr:last").after("<tr><td><input type='checkbox' name='chk' id='chk' value='' /></td><td>"+name+"</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>");
})
})
</script>
<style type="text/css">
tr{
height: 35px;
}
td{
width: 100px;
}
</style>
</head>
<body>
<h3>操作表格</h3>
<input type="button" name="" id="btn1" value="全选" />
<input type="button" name="" id="btn2" value="全不选" />
<input type="button" name="" id="btn3" value="反选" />
<input type="button" name="" id="btn4" value="选择奇数行" />
<input type="button" name="" id="btn5" value="隔行变色" />
<input type="button" name="" id="btn6" value="删除行" />
<input type="button" name="btn7" id="btn7" value="添加行" />
<hr />
<table border="1px">
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12344</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12355</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12366</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12377</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>