源码下载 链接:https://pan.baidu.com/s/1nFa9iW4XZGFx8b6R65XAYg 提取码:7xa1
1.JQuery的封装原理
2.JQuery的选择器
3.JQuery操作元素属性
4.JQuery操作元素内容JQuery
5.JQuery操作元素样式
6.JQuery
7.JQuery
3.JQuery操作元素属性
1.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" onclick="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>
2.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" onclick="testId()" class="common"/>
<input type="button" name="" id="" value="测试标签选择器" onclick="testEle()"/>
<input type="button" name="" id="" value="测试类选择器" onclick="testClass()"/>
<input type="button" name="" id="" value="测试组合选择器" onclick="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>
3.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>
4.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>
5.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>
6.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>
7.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.onclick=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.onload=function(){
alert("我是js方式页面加载");
}
window.onload=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>
8.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>
9.JQuery实战 一个动态菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
body {
font-size: 16px;
background-color: #FFF;
}
ul li {
list-style: inside;
margin-left: 20px;
list-style: none;
}
#content {
position: absolute;
left: 400px;
top: 20px;
width: 500px;
height: 400px;
border: 1px solid #cccccc;
}
#tips {
position: absolute;
z-index: 1;
border: 1px solid #cccccc;
background-color: #FFC;
display: none;
font-size: 14px;
}
.lightlabel {
color: red;
text-decoration: underline;
cursor: pointer;
}
</style>
<title>JQUERY树状菜单</title>
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//实现每颗树的显示或者隐藏
$(function(){
//ID选择器
//组合选择器
$("#lblNews,#lblProducts").click(function(){
//var obj=$("#lblNews").siblings();//siblings():获取到同辈元素的元素集合 div img
//var containerDiv=$("#lblNews").siblings("div");//div
//var img=$("#lblNews").siblings("#imgOnOff");//img
var containerDiv=$(this).siblings("div");// div this:是当前事件触发的元素对象 $(this)--->jq对象
var img=$(this).siblings("#imgOnOff");//img this:是当前事件触发的元素对象 $(this)--->jq对象
// console.info(containerDiv);
//console.info(img);
//进行效果显示控制
//alert(containerDiv.css("display"));//获取CSS样式属性
if(containerDiv.css("display")=="block"){//显示----》隐藏
//containerDiv.hide(1000);//隐藏动画
containerDiv.slideUp(1000);//滑上
img.attr("src","img/close.gif");
}else{//隐藏----》显示
//containerDiv.show(1000);//显示动画
containerDiv.slideDown(1000);//滑下
img.attr("src","img/open.gif");
}
});
});
//实现所有树的显示或者隐藏
$(function(){
$("#openclose").click(function(){
//获取元素对象 4个 2个div 2个img
//属性选择器 全匹配 首匹配 尾匹配 模糊匹配
//$("div[name^=div]");// 首匹配
//$("div[name$=Container]");//尾匹配
var div= $("div[name*=Contain]");// 模糊匹配 2个div
var img=$("img[name='imgOnOff']");//全匹配
// console.info(img);
//console.info(div);
//进行显示控制
//注意:div中有两个以上的元素对象时,获取样式属性的时候,会以第一个div元素为基准点进行判断
if(div.css("display")=="block"){//显示----》隐藏
div.fadeOut(1000);//滑上
img.attr("src","img/close.gif");
}else{//隐藏----》显示
div.fadeIn(1000);//滑下
img.attr("src","img/open.gif");
}
});
});
//实现横向排列 和纵向排列
$(function(){
//实现横向排列
$("#horder").click(function(){
//子对象选择器 层级选择器
var li= $("ul>div>li");//8个
//进行效果显示控制
//实现横向排列实际就是操作li标签的css样式属性中的浮动属性,值为左浮动
li.css("float","left");//设置
});
//实现纵向排列
$("#vorder").click(function(){
//层级选择器
var li=$("ul li");//8个
//进行效果显示控制
//实现纵向排列实际就是操作li标签的css样式属性中的浮动属性,清除左浮动
li.css("float","none");
});
});
//提示信息的实现 鼠标移上去mouseover():给出提示信息 鼠标离开mouseout():的时候清空提示信息 event对象:事件触发过程中由浏览器产生,我们直接使用即可
$(function(){
//鼠标移上去mouseover():给出提示信息
$("ul div li label").mouseover(function(event){
//获取label标签的文本值
var txt=$(this).text();
//获取用于信息的提示的元素对象,设置提示信息
$("#tips").html("<b>点击查看【"+txt+"】信息</b>");
//控制提示信息显示的位置 left top
$("#tips").css("left",event.pageX+10);
$("#tips").css("top",event.pageY+5);
//显示
$("#tips").show();
//为当前的label标签增加一个class样式
$(this).addClass("lightlabel");
});
//鼠标离开mouseout():的时候清空提示信息
$("ul div li label").mouseout(function(){
//获取用于信息的提示的元素对象,清空提示信息
$("#tips").html("");
//设置提示信息的位置 归于原点 0 0
$("#tips").css({left:"0","top":"0"});
//将提示的元素对象div隐藏
$("#tips").hide();
//为当前的label标签移除一个class样式 lightlabel
$(this).removeClass("lightlabel");
});
});
//获取新闻
$(function(){
$("div[name='divNewsContainer'] label").click(function(){
var ntype=$(this).attr("ntype");
//发送ajax请求
$.ajax({
url:"news.action",
type:"get",
data:{"ntype":ntype},
dataType:"json",
success:function(result){
//进行页面显示控制
var content=$("#content");
content.empty();
//遍历进行新闻追加
for(var i=0;i<result.length;i++){
var news=result[i];
content.append("<a href='#'>"+news.title+"("+news.time+")"+"</a><br/>");
}
},
error:function(xhr,text,message){
console.info(xhr);
//console.info(text);
//console.info(message);
if(xhr.status==500){
alert("服务器异常,请联系管理员");
}
}
});
});
});
//获取产品log
$(function(){
$("div[name='divProductsContainer'] label").click(function(){
//获取产品 牌名称
var p=$(this).attr("product");
var url="product.action";
var data={"p":p};
//进行显示控制
$("#content").load(url,data);
});
});
</script>
<body>
<p>
<input type="button" name="openclose" id="openclose" value="展开/折叠" />
<input type="button" name="horder" id="horder" value="横向排列" />
<input type="button" name="vorder" id="vorder" value="纵向排列" />
</p>
<ul>
<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
<label id="lblNews"> 国际动态</label>
<div name="divNewsContainer">
<li><img src="img/item.gif" /><label id="lblLocal" ntype="local">国内新闻</label></li>
<li><img src="img/item.gif" /><label id="lblInternational" ntype="international">国际新闻</label></li>
</div>
</ul>
<br />
<ul>
<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
<label id="lblProducts"> 产品展示</label>
<div name="divProductsContainer">
<li><img src="img/item.gif" /><label id="lblAdidas" product="adidas">阿迪达斯</label></li>
<li><img src="img/item.gif" /><label id="lblNike" product="nike">NIKE</label></li>
<li><img src="img/item.gif" /><label id="lblKuangWei" product="converse">匡威</label></li>
<li><img src="img/item.gif" /><label id="lblAddNice" product="addnice">AddNice</label></li>
<li><img src="img/item.gif" /><label id="lblLiNing" product="lining">李宁</label></li>
<li><img src="img/item.gif" /><label id="lblLee" product="lee">Lee</label></li>
</div>
</ul>
<div id="tips"></div>
<div id="content"></div>
</body>
</html>