jquery学习
1、什么是jquery
jquery 全称 javaScript Query JS中的一个框架，本质上仍然是js.
2、jQuery的特点
支持各种主流的浏览器
使用特别简单
拥有便捷的插件扩展机制和丰富的插件
3、使用jquery
引入jquery文件
jquery的封装原理
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖
2、使用对象封装，将代码封装到对象中，但是对象如果被覆盖，则会全部失效，风险极高。
3、使用工厂模式，将代码进行封装，但是并没有解决问题
4、将封装的函数名字去除，避免覆盖。但是函数就没有办法的调用啦
5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复地调用，并且数据没有办法获取
6、使用闭包，将数据一次性挂载到window对象下
//闭包原理：在全局区域中不能获取函数体内的数据，使用更大作用域的变量来记录小作用域变量的值
jquery的选择器
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器
内容选择器
可见性选择器
属性选择器
表单选择器
子元素选择器
注意：
jquery中选择器获取的是存储了HTML元素对象的数组
jquery获取的元素对象不能够直接使用JS的内容，按照数组的取出方式将对象取出后可以使用JS的内容
jquery对我们提供了多种多样的选择器来选择需要操作的html元素对象。
代码示例：
--------------------------------------------------------------------------------
<html>
<head>
<title>jquery的选择器</title>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jquery-1.4.2.js"charset="UTF-8" ></script>
<script type="text/javascript">
//id选择器
function testId(){
var inp=$("#uname");
alert(inp.val());
}
//标签选择器
function testEle(){
var inps=$("input");
alert(inps[2].value);
}
//类选择器
function testCla(){
var inps=$(".common");
alert(inps.length);
}
//组合选择器
function testAll(){
var eles=$("h4,input");
alert(eles.length);
}
//子选择器
function testChild(){
var chi=$("div>input");
alert(chi.length);
}
//层级选择器---first
function testCj(){
var cj=$("div>input:first");
alert(cj.val());
}
//层级选择器2---not
function testcj2(){
var tds=$("td:not(td[width])");
alert(tds.html());
}
</script>
<style type="text/css">
.common{
}
#showdiv{
width: 300px;
height: 300px;
border: solid 2px orange;
}
</style>
</head>
<body>
<h4>jquery的选择器</h4>
<input type="button" value="测试ID" onclick="testId()" class="common" />
<input type="button" name="" id="" value="测试元素" onclick="testEle()" />
<input type="button" name="" id="" value="测试类选择器" onclick="testCla()" />
<input type="button" name="" id="" value="测试组合选择器" onclick="testAll()" />
<input type="button" name="" id="" value="测试子选择器" onclick="testChild()" />
<input type="button" name="" id="" value="测试层级选择器" onclick="testCj()" />
<input type="button" name="" id="" value="测试层级选择器2" 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">
<tr height="30px">
<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操作元素的属性
获取:
对象名.attr("属性名") //返回当前属性值
注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。
修改：
对象名.attr("属性名"，"属性值")；
代码示例：
--------------------------------------------------------------------------------
<html>
<head>
<title>jquery操作元素的属性</title>
<meta charset="UTF-8"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function testFiled(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type"));
}
function testFiled2(){
var uname=$("#uname");
uname.attr("type","button");
}
</script>
</head>
<body>
<h3>jquery操作元素的属性</h3>
<input type="button" name="" id="" value="测试获取元素的属性" onclick="testFiled()" />
<input type="button" name="" id="" value="测试修改元素的属性" onclick="testFiled2()"/>
<hr />
用户名：<input type="text" name="uname" id="uname" value=""/>
</body>
</html>
--------------------------------------------------------------------------------
jquery操作元素的样式和内容
操作元素内容：
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有的内容覆盖，html标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析
操作元素样式：
1、使用css()
对象名.css("属性名")///返回当前属性的样式值
对象名.css("属性名","属性值")//增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"..............})//使用json传参,提升代码的书写效率
2、使用addClass()
对象名.addClass("类选择器名")//追加一个类样式
对象名.removeClass("类选择器名")//删除一个指定的样式
代码示例：
--------------------------------------------------------------------------------
<html>
<head>
<title>操作元素的样式</title>
<meta charset="UTF-8"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function testCss(){
var showdiv=$("#showdiv");
//操作样式--增加
showdiv.css("background-color","lightcoral");
//操作样式--获取
alert(showdiv.css("width"));
}
function testCss2(){
var div=$("#div01");
div.css({"border":"solid 1px","width":"300px","height":"300px"});
}
function testClass(){
var div=$("#div01");
div.addClass("common");
}
function testClass2(){
var div=$("#div01");
div.addClass("dd");
}
function testRemove(){
var div=$("#div01");
div.removeClass("dd");
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px orange;
}
.common{
width: 300px;
height: 300px;
border: solid 1px orange;
background-color: blueviolet;
}
.dd{
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>操作元素的样式</h3>
<input type="button" name="" id="" value="操作样式--css" onclick="testCss()" />
<input type="button" name="" id="" value="操作样式--css--josn" onclick="testCss2()" />
<input type="button" name="" id="" value="操作样式--class" onclick="testClass()" />
<input type="button" name="" id="" value="操作样式--class2" onclick="testClass2()" />
<input type="button" name="" id="" value="操作样式--remove" onclick="testRemove()" />
<hr />
<div id="showdiv">
</div>
<div id="div01">
你是我最美的期待
</div>
</body>
</html>
--------------------------------------------------------------------------------
jquery操作元素的文档结构
获取元素对象
1.内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将指定的元素对象追加到指定的对象内容
prepend("内容") 将指定的内容追加到对象的内部的前面
prependTo("元素对象或选择器") 将指定的元素对象追加到指定的对象内容前面
2.外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
inserAfter 把所有匹配的元素插入到一个、指定的元素集合的后面
inserBefore 把所有匹配的元素插入到另一个、指定的元素集合的前面
3、包裹
4、替换
5、删除
empty()
代码示例：
--------------------------------------------------------------------------------
<html>
<head>
<title>操作文档结构</title>
<meta charset="UTF-8"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 3px orange;
}
</style>
<script type="text/javascript">
//内部插入
function testAppend(){
var div=$("#showdiv");
div.append("<i>你是我最美的期待</i>")
}
function testAppendTo(){
var div=$("#uid");
div.appendTo("#showdiv");
}
function testPreAppend(){
$("#showdiv").prepend("<i>无怨无悔</i>");
}
function testPreAppendTo(){
$("#uid").prependTo("#showdiv");
}
//外部插入
function testAfter(){
var div=$("#showdiv");
div.after("<b>向前跑</b>");
}
function testBefore(){
var div=$("#showdiv");
div.before("我是一只快乐的小跳蛙，啦啦啦啦啦");
}
function testInserAfter(){
$("#uid").insertAfter("#showdiv");
}
function testEmpty(){
var div=$("#showdiv");
div.empty();
}
</script>
</head>
<body>
<h3>操作文档结构</h3>
<input type="button" name="" id="" value="测试Append" onclick="testAppend()"/>
<input type="button" name="" id="" value="测试AppendTo" onclick="testAppendTo()"/>
<input type="button" name="" id="" value="测试PreAppend" onclick="testPreAppend()"/>
<input type="button" name="" id="" value="测试PrependTo" onclick="testPreAppendTo()"/>
<input type="button" name="" id="" value="测试After" onclick="testAfter()"/>
<input type="button" name="" id="" value="测试Before" onclick="testBefore()"/>
<input type="button" name="" id="" value="测试inserBefore" onclick="testInserAfter()"/>
<input type="button" name="" id="" value="测试empty()" onclick="testEmpty()"/>
<u id="uid">你是我最美的期待</u>
<hr />
<div id="showdiv">
<b>在最美的期待</b>
</div>
</body>
</html>
--------------------------------------------------------------------------------
jquery中的是事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数
注意：
js中的是一次添加，多次添加时覆盖的效果
jquery是追加的效果，可以实现给一个事件添加不同的监听函数。
元素对象。unBind("事件名")//移除指定的元素对象的指定事件
注意：
js天机添加的事件不能被移除。
元素对象.one("事件名",fn)//给指定的元素对象添加一次性的事件，事件被触发执行一次即失效。
注意：
可以给事件添加多个一次函数，unBind可以用来解绑
页面载入事件
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
