引入jQuery
<script type="text/javascript" src="./lib/jquery.js"></script>
$(function(){//表示页面加载完成，相当于：window.onunload = function()
var $butt = $("#bt");//表示按照id查找对象
$butt.click(function(){
alert("jQuery的单击事件");
})
})
可以直接把html添加到body中
$(function(){
$("<div><span>模块1</span><span>模块2</span></div>").appendTo("body");
})
DOM与JQuery对象相互转化
将dom对象传入$()函数里即可转化为jQuery对象
$(function(){
//拿到DOM对象：
var domObject = document.getElementById("but1");
//转化为JQuery对象：
var $j = $(domObject);
//输出看效果：
alert($j);
})
拿到jQuery对象相当于拿到了dom对象的数组，所以只需要根据下标就能取出jQuery对象
$(function(){
//拿到jQuery对象：
var j = $("#but1");
//转化为DOM对象：
var domObj = j[0];
//输出看效果：
alert(domObj);
})
jQuery
jQuery全称 javaScript Query是js的一个框架。本质上仍然是js,支持各种主流的浏览器；使用特别简单；拥有便捷的插件,扩展机制和丰富的插件。
选择器
JQuery提供了多种多样的选择器，来选择需要操作的Html元素对象，其他的可以查文档。
id选择器
<input type="text" value="张三" id="uname" onclick="testId()"/>
function testId(){
//id选择器：
var inp = $("#uname");
//获取input的value值：
alert(inp.val());
}
标签选择器
<input type="text" value="张三" id="uname" onclick="testTag()"/>
function testTag(){
//标签选择：
var inp = $("input");
//这个返回值是一个数组
alert(inp.length);
//获取"张三"
alert(inp[0].value);
}
类选择器
<input class="comment" type="text" value="张三" onclick="testClass()"/>
function testClass(){
//类选择器
var inp = $(".comment");
//数组
alert(inp);
}
组合选择器
<h4>嘿嘿</h4>
<input class="comment" type="text" value="张三" id="uname" onclick="testClass()"/>
<input type="text" value="李四" id="uname"/>
function testClass(){
//组合选择器
var eles = $("h4,.comment,#uname");
//数组
alert(eles.length);
}
子选择器
<style type="text/css">
#showDiv{
height: 200px;
width: 300px;
border: solid 2px blueviolet;
}
</style>
<div id="showDiv">
<input type="text" value="张三" id="uname" onclick="testClass()"/>
<input type="text" value="李四" id="uname"/>
<input type="text" value="王五" id="uname"/>
<input type="text" value="马六" id="uname"/>
</div>
function testClass(){
//子选择器：
var eles = $("div>input");
//或者：
var eles = $("#showDiv>input");
alert(eles.length);
}
操作元素属性
获取元素属性值
<input id="uname" type="text" value="张三" onclick="testFiled()"/>
function testFiled(){
var uname = $("#uname");
//结果：text张三，但是这里获取的value只能获取默认的
alert(uname.attr("type")+uname.attr("value"));
//要想获取输入框内的实时属性值:
alert(uname.attr("type")+uname.val());
}
修改属性值
<input id="uname" type="text" value="输入框" onclick="testFiled()"/>
function testFiled(){
var uname = $("#uname");
//把输入框变成一个按钮:
uname.attr("type","button");
}
操作元素内容
修改html元素内容
<input type="button" onclick="testFiled()" value="获取标签内的内容"/>
<input type="button" onclick="testChange()" value="修改标签内的内容"/>
<div id="showdiv">
<b>嘿嘿</b>
</div>
function testFiled(){
var showdiv = $("#showdiv");
alert(showdiv.html());
//获取到的结果：<b>嘿嘿</b>
}
function testChange(){
var showdiv = $("#showdiv");
showdiv.html("<b>今天天气真好！</b>");
//实现内容拼接:可以实现不断地向界面添加按钮
showdiv.html(showdiv.html()+"<b>今天天气真好！</b>");
//调用text("contexn")也可以执行修改内容，但是不解析标签
showdiv.text("不解析标签");
}
//修改css样式
function testAdd(){
var showdiv = $("#showdiv");
//增加样式
showdiv.css("background-color","orange");
//修改样式(Json)
showdiv.css({"border":"solid orange","height":"300px"});
//获取样式
alert(showdiv.css("width"));
}
操作样式
<div id="showdiv"></div>
<style type="text/css">
.com{
width: 100px;
height: 200px;
background-color: black;
border: #00FFFF;
}
</style>
<script type="text/javascript">
function testAdd(){
var showdiv = $("#showdiv");
showdiv.addClass("com");
//删除某一个样式
showdiv.removeClass("dd");
}
</script>
操作文档结构
内部插入
<input type="button" onclick="testFiled()" value="开始测试"/>
<div id="showdiv">
<b>今天中午吃什么</b>
</div>
function testFiled(){
var div = $("#showdiv");
//后面
div.append("<b>饭</b>");
//前面
div.prepend("<b>你好，</b>");
}
这种方式也可以实现数据填充
<u id="u1">嘿嘿</u>
<div id="showdiv">
<b>今天中午吃什么</b>
</div>
function testFiled(){
var div = $("#showdiv");
$("#u1").appendTo(div);
}
可以实现一个添加一个标签那种效果
外部插入
<div id="showdiv">
<b>给我笑一个</b>
</div>
function testFiled(){
var div = $("#showdiv");
//后面
div.after("<b>哈哈</b>");
//前面
div.before("<b>哈哈</b>");
}
操作事件
使用js给按钮添加事件
<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>
function fun(){
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("我是js方式");
}
}
使用js的方式实际上是一个赋值的操作，无论赋值多少次，那么该按钮的事件只能是一个。
使用jQuery绑定事件
<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>
function fun(){
$("#btn").bind("click",function(){
alert("我是bind绑定单击事件");
});
}
jQuery使用的是一种追加的方式，绑定多次，就会使得方法执行多次。
解绑单击事件
<input type="button" value="给下面的按钮添加一个事件" onclick="fun()" />
<input id="btn" type="button" value="按钮"/>
<input type="button" value="解绑所有事件" onclick="fun1()"/>
function fun(){
$("#btn").bind("click",function(){
alert("我是bind绑定单击事件");
});
}
function fun1(){
$("#btn").unbind("click");
}
解绑的动作指的是解绑click事件，直接移除该事件，要想使事件回来，再次绑定即可。
一次性事件
function fun(){
$("#btn").one("click",function(){
//执行一次后失效
alert("我是one事件");
});
}
使用unbind也是可以解绑one事件的。
页面载入事件
js写法：
window.onload=function(){
alert("我是页面载入");
}
jQuery写法
$(document).ready(function(){
alert("我是jQurey");
});
jQuery动画
show([time])
<style>
#showdiv{
height: 200px;
width: 200px;
display: none;
background-color: orange;
}
</style>
<input type="button" value="播放动画" onclick="fun()" />
<div id="showdiv"></div>
function fun(){
$("#showdiv").show(300);
}
hide([time])
<style>
#div01{
height: 200px;
width: 200px;
background-color: aqua;
}
#div02{
height: 200px;
width: 200px;
display: none;
background-color: orange;
}
</style>
<input type="button" value="播放动画" onclick="fun()" />
<div id="div01"></div>
<div id="div02"></div>
function fun(){
$("#div02").show(300);
$("#div01").hide(300);
$("#div01").show(300);
$("#div02").hide(300);
}
toggle([time])
替换上面的效果
function fun(){
$("#div01,#div02").toggle(200);
}
上下滑动
function fun(){
$("#div01").slideUp(200);
$("#div02").slideDown(200);
}
淡入淡出
function fun(){
$("#div01").fadeOut(1000);
$("#div02").fadeIn(1000);
}
网友评论