JQuery基础
全称：Java script query 也是一个js的框架
特点：语法简单 支持主流浏览器 插件扩展机制和丰富的插件
- 引入jquery文件
- jquery的封装原理
- jquery的选择器
- jquery操作元素的属性
- jquery操作元素的内容和样式
- jquery操作元素的文档结构
- jquery中的事件
- jquery的动画效果
相关代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery学习</title>
<!--
JQuery学习：
全称：Java script query 也是一个js的框架
特点：语法简单 支持主流浏览器 插件扩展机制和丰富的插件
使用：
1、引入jquery文件
<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
2、jquery的封装原理
封装测试：
js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖
使用对象封装，将代码封装到对象中，但是对象如果被覆盖，则全部失效，风险极高
使用工厂模式，将代码进行封装，但是并没有解决问题
将封装的函数名字去除，避免覆盖，但是函数没办法调用了
匿名自调用，可以在页面加载的时候被调用一次，但是不能重复调用，并且数据没办法获取
最终方法：使用闭包（使用更大数据域的数据对象保存小数据域对象的数据）
将数据一次性挂载在window对象下
3、jquery的选择器
基本选择器：
id 标签 类 组合
层级选择器：
简单选择器：
内容选择器：
可见性选择器：
属性选择器：
子元素选择器：
表单选择器：
注意：jquery中选择器获取的是存储了html元素对象的数组
jquery获取的元素对象不能直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
JQuery给我们提供了多种多样的选择器来选择需要操作的html元素对象
4、jquery操作元素的属性
获取：
var name=$("#name");
alert(name.attr("type"));
修改：
var na=$("#name");
na.attr("type","button");
注意：同javascript一样：attr()不能实时获得数据，val()可以获得
5、jquery操作元素的内容和样式
操作内容：
获取：
var cont=window.$("#show");
alert(cont.html());
修改：
var cont=window.$("#show");
cont.html("<b>今天天气很好！</b>");
同样：text()用法也与此方法差不多
操作样式：
使用css()：
var css1 = window.$("#show");
//获取
alert(css1.css("height"));
//添加
css1.css("background-color","red");
注意：可以使用json格式进行赋值：
css2.css({"font-size":"15px","color":"red","border-radius":"50px"});
使用Class():
var cl=window.$("#show");
cl.addClass("cca"); //追加
ca.removeClass("cca"); //删除
6、jquery操作元素的文档结构
内部插入：
指定内容的后面：
append("内容")
appendTo(元素对象或选择器)
指定内容的前面：
prepend("内容")
prependTo(元素对象或选择器)
外部插入：
after：将指定的内容追加到指定的元素后面
before：将指定的内容追加到指定的元素前面
insertAfter：将所有匹配的元素插入到另一个指定的元素的集合后面
insertBefore：将所有匹配的元素插入到另一个指定的元素的集合前面
7、jquery中的事件
绑定事件：
window.$("#btn").bind("click",function(){alert("bangding")});
解绑事件：
window.$("#btn").unbind("click");
One事件：
window.$("#btn").one("click",function(){alert("one事件")})
页面载入事件：页面载入成功后回调用传入的对象
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖
$(document).ready(function () {
alert("Jquery!");
})
注意：js中的是一次添加，多次添加是覆盖的鲜果
jquery中的是追加，可以实现给一个事件添加不同的监听函数
8、jquery的动画效果
show()
hide()
toggle()
slideUp()
slideDown()
fadeOut()
-->
<!--声明js代码域-->
<script>
//id
function testId() {
var inp=window.$("#uname");
alert(inp.val());
}
//元素
function testTag() {
var iup=window.$("input");
alert(iup.length);
}
//类
function testClass() {
var cs=window.$(".con ") ;
alert(cs.length);
}
//组合选择器
function testAll() {
var al=window.$("h3,input");
alert(al.length);
}
//子选择器
function testChild() {
var nps=window.$("div>input");
alert(nps.length);
}
//jquery操作元素的属性
function testFile() {
var name=$("#name");
alert(name.attr("type"));
}
function testFile1() {
var na=$("#name");
na.attr("type","button");
}
//jquery操作元素的样式和内容
function testHtml() {
var cont=window.$("#show");
alert(cont.html());
}
function testHtml1() {
var cont=window.$("#show");
cont.html("<b>今天天气很好！</b>");
}
function testCss() {
var css1 = window.$("#show");
//获取
alert(css1.css("height"));
//添加
css1.css("background-color","red");
//删除
css1.css("width","20px");
}
function testCss1() {
var css2 = window.$("#show");
css2.css({"font-size":"15px","color":"red","border-radius":"50px"});
}
function addClass() {
var cl=window.$("#show");
cl.addClass("cca");
}
function removeClass() {
var ca=window.$("#show");
ca.removeClass("cca");
}
//jquery操作元素的文档结构
function t1() {
var we1=window.$("#we");
we1.append("Linyuqi");
}
function t2() {
var we2=window.$("#we");
we2.appendTo("#showdiv");
}
function t3() {
var we3=window.$("#we");
we3.prepend("Linyuqi");
}
function t4() {
var we4=window.$("#we");
we4.prependTo("#showdiv");
}
function s1() {
var w=window.$("#we");
w.after("fuck!")
}
function s2() {
var w=window.$("#we");
w.before("you!")
}
//jquery中的事件
function bind() {
window.$("#btn").bind("click",function(){alert("bangding")});
}
function unbind() {
window.$("#btn").unbind("click");
}
function one() {
window.$("#btn").one("click",function(){alert("one事件")});
}
//页面载入
$(document).ready(function () {
alert("Jquery!");
})
//jquery的动画效果
function ee() {
window.$("#ee").show(3000);
window.$("#ee").hide(5000);
window.$("#ee").toggle(4000);
}
</script>
<!--js的外部引入-->
<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 声明CSS、代码域-->
<style>
#showdiv{
width: 180px;
height: 120px;
border: solid 1px aqua;
}
#show{
width: 180px;
height: 120px;
border: solid 1px aqua;
}
.cca{
background-color: #333333;
font-size: larger;
}
#we{
width: 300px;
height: 100px;
border: solid red 2px;
}
#q{
width: 300px;
height: 200px;
border: solid 2px red;
}
#ee{
height: 200px;
background-color: aqua;
}
</style>
</head>
<body onload="ee()">
<h3>jquery的选择器</h3>
<hr>
<input type="button"value="ID" class="con" οnclick="testId()">
<input type="button"value="Tag" οnclick="testTag()">
<input type="button"value="Class" οnclick="testClass()">
<input type="button"value="All" οnclick="testAll()">
<input type="text" id="uname" class="con" name="uname">
<hr>
<input type="button"value="子选择器" οnclick="testChild()">
<div id="showdiv">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<h3>jquery操作元素的属性</h3>
<hr>
<input type="button" value="获取属性" onclick="testFile()">
<input type="button" value="修改属性" onclick="testFile1()">
用户名：<input type="text" name="name" id="name" value="张三">
<h3>jquery操作元素的样式和内容</h3>
<hr>
<input type="button" value="获取内容" onclick="testHtml()">
<input type="button" value="修改内容" onclick="testHtml1()">
<input type="button" value="修改样式" onclick="testCss()">
<input type="button" value="JSON修改样式" onclick="testCss1()">
<input type="button" value="添加类样式" onclick="addClass()">
<input type="button" value="删除类样式" onclick="removeClass()">
<div id="show">
<b>前面有人！</b>
</div>
<h3>jquery操作元素的文档结构</h3>
<hr>
<input type="button" value="Append" onclick="t1()">
<input type="button" value="Appendto" onclick="t2()">
<input type="button" value="prepend" onclick="t3()">
<input type="button" value="prependto" onclick="t4()">
<input type="button" value="after" onclick="s1()">
<input type="button" value="before" onclick="s2()">
<div id="we">
<p>Welcome!</p>
</div>
<h3>jquery的事件</h3>
<hr>
<div id="q">
<input type="button" value="绑定事件" onclick="bind()">
<input type="button" value="解绑事件" onclick="unbind()">
<input type="button" value="one绑定事件" onclick="one()">
<br>
<input type="button" id="btn" value="事件">
</div>
<h3>jquery的动画效果</h3>
<hr>
<div id="ee">
</div>
</body>
</html>
总结
jquery封装了很多javascript的代码集合，简化了开发。
