1,什么是jquery
全程:javascript Query 是js的一个框架 本质仍然是js
2.jquery特点
支持各种主流浏览器
使用特别简单
拥有丰富的插件
3.jquery的封装原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的封装原理</title>
<script src="my.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
alert("我是test");
}
var a = 123;
//闭包原理:在全局不能够获取函数体内的数据使用更大作用域的变量来记录小作用域变量的值。
function testA(){
function test2(){
test2.name="张三";
var n = 999;
alert(a);
return n;
}
return test2;
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试test" onclick="a.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>
```my.js
//function test(){
// alert("我是外部声明");
//}
//声明对象
//var a ={};
//a.test= function(){
// alert("我是外部声明");
//}
//使用工厂
//function getA(){
// var a={};
// a.test=function(){
// alert("工厂")
// }
// return a;
//}
//匿名自调用
(function(obj){
// var a={};
obj.test=function(){
alert("工厂")
}
alert("匿名自调用")
})(window)
```css
在这里插入代码片
4.jquery的选择器
<!--
jQuery的选择器学习:
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
注意:
jQuery中选择器获取的是存储了HTML元素对象的数据
jquery提供了多种多样的选择器来选择需要操作的html元素对象,jQuery获取的元素对象 不能直接使用js的内容 除非按照数组的取出方式取出 就是js的对象
-->
<!--
1.引入jquery文件
-->
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
//id选择器
function testID(){
//jquery--id
var inp = $("#uname");
alert(inp.val());
}
//标签选择器
function testEle(){
var inps = $("input");
alert(inps.length);
}
//类选择器
function testClass(){
var inps = $(".common");
alert(inps);
}
//组合选择器
function testAll(){
var eles = $("h3,input,#uname")
alert(eles);
}
//测试子选择器
function testChild(){
var inps = $("#showDiv>input");
alert(inps.length);
}
//测试层级选择器
function testCj(){
var inp = $("input:first");
alert(inp.val());
}
function testCj2(){
var tda = $("td:not(:width)");
alert(tda.length);
}
</script>
<style type="text/css">
.common{}
#showDiv{
width: 300px;
height: 300px;
border: solid 1px orange;
}
</style>
</head>
<body>
<h3>jquery的选择器</h3>
<input type="button" name="uname" id="" value="测试标签" onclick="testID()" class="common"/>
<input type="button" name="uname" id="" value="测试id" onclick="testEle()"/>
<input type="button" name="uname" id="" value="测试class" onclick="testClass()"/>
<input type="button" name="uname" id="" value="测试组合选择器" onclick="testAll()"/>
<input type="button" name="uname" id="" value="测试子选择器" onclick="testChild()"/>
<input type="button" name="uname" id="" value="测试层级选择器--first" onclick="testCj()"/>
<input type="button" name="uname" id="" value="测试层级选择器--not" onclick="testCj2()"/>
<hr />
用户名:<input type="text" name="uname" id="uname" value="张三" class="common"/>
<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>
<table border="1px" height="200px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
5.jquery操作元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作元素属性</title>
<!--
jquery操作元素属性
获取:
对象名.attr("属性名")//返回当前属性值
注意:此种方式不能实时获取value属性。需要对象名.val来获取
修改:
对象名.attr("属性名","值");//不要去修改id和name
-->
<script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function testGet(){
//获取元素对象
var uname = $("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testFiled(){
//获取元素属性
var uname=$("#uname");
uname.attr("type","button");
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试获取元素属性" onclick="testGet()" />
<input type="button" name="" id="" value="测试修改元素属性" onclick="testFiled()" />
<h3>jQuery操作元素属性</h3>
用户名:<input type="text" name="uname" id="uname" value="哈哈" />
</body>
</html>
6.jquery操作元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作元素得内容</title>
<!--
jquery操作元素内容学习
获取元素对象
1.获取
对象名.html()//返回当前对象所有内容,包括html标签
对象名.text()//返回当前对象的文本内容,不包括html标签
2.修改
对象名。html("新的内容")//新的内容会将原有内容覆盖 HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有的内容覆盖
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<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>jquery操作元素得内容</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>
7.jquery操作元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作元素的样式</title>
<!--
jquery操作元素的样式
1.使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加,修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"});//使用json格式,提升代码开发效率
2.使用addClass()
对象名.addClass("类选择器类名");
对象名.remove("类选择器类名");
-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px ;
}
.common{
width: 300px;
height: 300px;
border: solid 1px ;
background: purple;
}
.dd{
font-size: larger;
}
</style>
<!--
引入jQuery文件
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jquery操作元素样式--css
function testCss(){
//获取元素对象
var showdiv = $("#showdiv");
//操作样式
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
//传json格式
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 testRemoveClass(){
//获取元素对象
var div=$("#div01");
//删除元素样式
div.remove("dd")
}
</script>
</head>
<body>
<h3>jquery操作元素的样式</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="删除样式---remove()" onclick="testRemoveClass()" />
<div id="showdiv">
</div>
<div id="div01" class="dd">
aaa
</div>
</body>
</html>
8.jquery操作文档结构
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作元素的样式</title>
<!--
jquery操作元素的样式
1.使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加,修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"});//使用json格式,提升代码开发效率
2.使用addClass()
对象名.addClass("类选择器类名");
对象名.remove("类选择器类名");
-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px ;
}
.common{
width: 300px;
height: 300px;
border: solid 1px ;
background: purple;
}
.dd{
font-size: larger;
}
</style>
<!--
引入jQuery文件
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jquery操作元素样式--css
function testCss(){
//获取元素对象
var showdiv = $("#showdiv");
//操作样式
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
//传json格式
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 testRemoveClass(){
//获取元素对象
var div=$("#div01");
//删除元素样式
div.remove("dd")
}
</script>
</head>
<body>
<h3>jquery操作元素的样式</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="删除样式---remove()" onclick="testRemoveClass()" />
<div id="showdiv">
</div>
<div id="div01" class="dd">
aaa
</div>
</body>
</html>
```css
在这里插入代码片
9.jquery操作事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作事件</title>
<!--
jquery动态操作事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意:
js中的是一次添加,多次添加是覆盖效果
jquery中添加是追加的效果 所以实现给一个事件添加不同的监听函数
元素对象.unbind("事件名")//移除指定的元素对象的指定事件
注意:js方式添加的事件 不能移除
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件,事件接触来执行一次即失效
注意:可以对事件添加多个一次函数,unBind可以用来解绑。
页面载入
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意:
这种方式,可以给页面载入动态的增加多个函数对象,不会被覆盖
js中window.onload=fn;也可以,但是载入多个会被覆盖
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//js动态添加事件
function testThing(){
//获取元素对象
var btn = document.getElementById("btn");
//操作属性
btn.onclick = function(){
alert("我是js方式");
}
}
//jquery
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")})
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2222")})
}
function testUnfBind(){
$("#btn2").unbind("click");
}
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入
//js方式
window.onload=function(){
alert("我是js方式页面加载");
}
window.onload=function(){
alert("我是js方式页面加载222");
}
//jquery方式
$(document).ready(function(){
alert("我是jquery");
})
$(document).ready(function(){
alert("我是jquery222");
})
</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="btn" id="btn" value="测试js" />
<input type="button" name="btn2" id="btn2" value="测试jquery--bind" />
<input type="button" name="btn3" id="btn3" value="测试jquery--one" />
</body>
</html>
10.jquery中的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作事件</title>
<!--
jquery动态操作事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意:
js中的是一次添加,多次添加是覆盖效果
jquery中添加是追加的效果 所以实现给一个事件添加不同的监听函数
元素对象.unbind("事件名")//移除指定的元素对象的指定事件
注意:js方式添加的事件 不能移除
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件,事件接触来执行一次即失效
注意:可以对事件添加多个一次函数,unBind可以用来解绑。
页面载入
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意:
这种方式,可以给页面载入动态的增加多个函数对象,不会被覆盖
js中window.onload=fn;也可以,但是载入多个会被覆盖
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//js动态添加事件
function testThing(){
//获取元素对象
var btn = document.getElementById("btn");
//操作属性
btn.onclick = function(){
alert("我是js方式");
}
}
//jquery
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")})
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2222")})
}
function testUnfBind(){
$("#btn2").unbind("click");
}
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入
//js方式
window.onload=function(){
alert("我是js方式页面加载");
}
window.onload=function(){
alert("我是js方式页面加载222");
}
//jquery方式
$(document).ready(function(){
alert("我是jquery");
})
$(document).ready(function(){
alert("我是jquery222");
})
</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="btn" id="btn" value="测试js" />
<input type="button" name="btn2" id="btn2" value="测试jquery--bind" />
<input type="button" name="btn3" id="btn3" value="测试jquery--one" />
</body>
</html>