jQuery初步

1.jQuery开发步骤

　　jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库。

　　（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

　　（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....

2.js对象转成jQuery对象

　　语法：$(js对象)---->jQuery对象

　　例如：$(divElement)---->$div

3.jQuery对象的三种基本定位方式

　　（A）通过ID属性：$("#id属性值")

　　（B）通过标签名：$("标签名")

　　（C）通过CLASS属性：$(".样式名")

4.jQuery9类选择器

基本选择器

//查找id的元素个数
alert($("#div1ID").size());
//查找div元素个数
alert($("div").length);
//查找class元素个数
alert($(".myClass").size());
//查找div，span，p的个数
alert($("div,span,p").size());
//查找所有id，class，p的元素个数
alert($("#div1ID,.myClass,p").size());

层次选择器

//找到form里面的input
alert($("form input").size());
//找到form里所有子级input元素
alert($("form>input").size());
//找到form同级的第一个input的值
alert($("form+input").val());
//找到form同级的input元素个数，从form往后找
alert($("form~input").length);

基本加强型选择器

//得到第一个li
alert($("ul li:first").text());
//得到最后一个li
alert($("ul li:last").text());
//得到第3个li，从0开始计数
alert($("ul li:eq(2)").text());
//得到偶数的tr
alert($("table tr:even").text());
//得到奇数的tr
alert($("table tr:odd").text());
//查找表格中索引号大于0的tr
alert($("table tr:gt(0)").size());
//查找表格中索引号小于4的tr
alert($("table tr:lt(4)").size());
//给h1\h2\h3标签加上红色背景，蓝色文字，header只用于h1、h2、h3
$(":header").css("background-color","red").css("color","blue");
//查找未选中的input为checkbox的元素个数
alert($(":checkbox:not(:checked)").size());

内容选择器

//查找所有包含文本"John"的div元素的个数
alert($("div:contains('John')").size());
//查找所有p元素为空的元素个数，不包含<p/>元素
alert($("p:empty").size());
//给所有包含p元素的div元素添加一个myClass样式
$("div:has(p)").addClass("myClass");
//查找所有含有子元素或者文本的p元素个数,即p为父元素，包含<p/>元素
alert($("p:parent").size());

可见性选择器

//1)查找隐藏的tr元素的个数
alert($("table tr:hidden").size());
//2)查找所有可见的tr元素的个数
alert($("table tr:visible").size());

属性选择器

//查找所有含有id属性的div元素个数
alert($("div[id]").size());
//查找所有name属性是newsletter的input元素，并将其选中
$("input[name='newsletter']").attr("checked","checked");
//查找所有name属性不是newsletter的input元素，并将其选中
$("input[name!='newsletter']").attr("checked","checked");
//查找所有name属性以'news'开头的input元素，并将其选中
$("input[name^='news']").attr("checked","checked");
//查找所有name属性以'letter'结尾的input元素，并将其选中
$("input[name$='letter']").attr("checked","checked");
//查找所有name属性包含'news'的input元素，并将其选中
$("input[name*='news']").attr("checked","checked");
//找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked","checked");

子元素选择器

//迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function () {
//alert(this.text());传统js对象不能调用text
alert($(this).text());
})
//迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function () {
//alert(this.text());传统对象不能调用text
alert($(this).text());
})
//迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function () {
alert($(this).text());
})
//在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function () {
alert($(this).text());
})

表单选择器

//查找所有input元素的个数
//alert( $("input").size() );//10，找input标签
alert( $(":input").size() );//13，找input标签和select/textarea/button
//查找所有文本框的个数
alert( $(":text").size() );
//查找所有密码框的个数
alert( $(":password").size() );
//查找所有单选按钮的个数
alert( $(":radio").size() );
//查找所有复选框的个数
alert( $(":checkbox").size() );
//查找所有提交按钮的个数，包括<button>标签
alert( $(":submit").size() );
//匹配所有图像域的个数
alert( $(":image").size() );
//查找所有重置按钮的个数
alert( $(":reset").size() );
//查找所有普通按钮的个数，包括input的type=button
alert( $(":button").size() );
//查找所有文件域的个数
alert( $(":file").size() );
//查找所有input元素为隐藏域的个数
alert( $(":input:hidden").size() );

表单对象属性选择器

//查找所有可用的input元素的个数
alert($("input:enabled").size());
//查找所有不可用的input元素的个数
alert( $("input:disabled").size() );
//查找所有选中的复选框元素的个数
alert( $(":checkbox:checked").size() );
//查找所有未选中的复选框元素的个数
alert( $(":checkbox:NOT(:checked)").size() );
//查找所有选中的选项元素的个数
alert( $("select option:selected").size() );
//查找id为provinceID的select的未选中的选项个数
alert( $("#provinceID option:NOT(:selected)").size() );

5.jQuery方法

DOM标准规则下的jQuery常用API

//DIV标签插入到UL标签之后(父子关系)
$("ul").append($("div"));
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend($("div"));
//DIV标签插入到UL标签之后(兄弟关系)
$("ul").after($("div"));
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before($("div"));

//取得form里第一个input元素的type属性
//<input type="text" name="username" value="张三"/>
alert($("form input:first").attr("type"));
//设置form里最后一个input元素的为只读文本框
$("form input:last").attr("readonly","true");

//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
/*js方式*/
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈</div>")
$("body").append($div)
$(document.body).append($div);

//删除ID为secondID的LI元素
$("#secondID").remove();
//删除第一个ul中的所有LI元素
$("#a li").remove();
//删除第二个UL元素
$("#b").remove();

//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after($new);
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function (){
alert("动态事件");
})
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $old = $(":button");
var $new = $old.clone(true);//复制行为和样式
$new.val("新按钮");
$old.after($new);

//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );

//为<table>元素添加属性border/align/width
$("table").attr("border","2").attr("align","right").attr("width","60%");
//将<table>元素的align属性删除
$("table").removeAttr("align");

添加样式

//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");

//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x);
alert(y);
//设置图片的坐标
$("img").offset({
top:100,
left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);

//取得div元素的直接子元素内容，不含后代元素
//<div>
//    <span>
//        Hello Again
//        <b>
//            Bold
//        </b>
//    </span>
//</div>
alert($("div").children().text());//Hello Again Bold
//取得div元素的下一个同级的兄弟元素内容
alert($("div").next().text());
//取得div元素的上一个同级的兄弟元素内容
alert($("div").prev().text());
//依次取得div元素同级的所有兄弟中p元素的内容
$("div").siblings("p").each(function(){
alert($(this).text());
});

动画

//图片隐蔽
$("img").hide(5000,function(){
alert("隐藏完毕");
});
//休息3秒
window.setTimeout(function(){
$("img").show(5000);
},3000);

//淡出隐蔽图片
$("img").fadeOut(3000);
//淡入显示图片
$("img").fadeIn(3000);

$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});

6.jQuery事件

/*使用JS方式加载a()和b()二个方法，后面的覆盖前面的*/
window.onload = function(){
a();
}
window.onload = function(){
b();
}
/*使用jQuery最简方式加载a()和b()二个方法，不会覆盖两个都会执行*/
$(function(){
a();
});
$(function(){
b();
});
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change( function(){
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value+":"+text);
} );
//加载页面时获取光标并选中所有文字
$(function(){
//定位光标
$(":text").focus();
//选中字体
$(":text").select();
})
//当按键弹起时，显示所按键的unicode码
$(function(){
//IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
$(document).keyup(function(){
//获取按钮的unicode编码
var code = event.keyCode;
alert(code);
});
});
//显示鼠标移动时的X和Y座标
$(function(){
$(document).mousemove(function(){
var x = event.clientX;
var y = event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
//鼠标移到某行上，某行背景变色
$("table tr").mouseover(function(){
$(this).css("background-color","activecaption");
});

//鼠标移出某行，某行还原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});

//鼠标移到某图片上，为图片加边框
$("img").mouseover(function(){
$(this).css("border-color","red");
});

//鼠标移出图片，图片还原
$("img").mouseout(function(){
$(this).css("border-color","white");
});
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
$("form :text").focus();
})
</script>

<script type="text/javascript">
//检测是否为中文，true表示是中文，false表示非中文
function isChinese(str){
var reg = /^[\u4E01-\uFA29]+$/i;
if(reg.test(str))
{
return true;
}
return false;
}
</script>

<script type="text/javascript">
//当表单提交前检测
$("form").submit(function(){
var flag = false;
//获取文本框中内容
var inputText = $("form :text").val();
//去空格
inputText = $.trim(inputText);
//判断是否有内容
if(inputText.length >0){
//如果有英文
if(isChinese(inputText))
{
flag = true;
$("form :text").val("");
}
else {
alert("用户名必须为中文")
}
}
else {
alert("必须填写用户名")
}
return flag;
})
</script>
//浏览器加载页面时，文本框样式改变
$(function(){
$("table :text").addClass("myClass");
});
//光标移上去时，清空文本框内容
$("table :text").focus(
function(){
$(this).val("");
$(this).removeClass("myClass");
}
);
//当文本框失去焦点时，恢复原来的样式
$("table :text").blur(function(){
var content = $(this).val();
if($.trim(content).length == 0)
{
$(this).val("输入用户名");
$(this).addClass("myClass");
}
})

7.jQuery中使用AJAX

　　简单获取时间，jquery对象调用load，直接将返回的数据插入到jquery对象里面。对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交，如果请求体有参数发送的话，load方法采用POST方式提交。

　　简单形式：jQuery对象.load(url)

返回结果自动添加到jQuery对象代表的标签中间

如果是Servlet的话，采用的是GET方式

　　　　如果是Servlet的话，采用的是GET方式。

复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

sendData = {"user.name":"jack","user.pass":"123"};

以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

function getMsg(){
var url = "${pageContext.request.contextPath}/ajax_time?time="+new Date().getTime();
// 参数一：url
// 参数二：以post方式发送的JSON格式数据
// 参数三：回调函数
$("#timeSpan").load(url,null,function(backData,textStatus,ajax){
//回调函数的三个参数
//返回的数据，它是js对象
alert(backData);
//返回状态的文本描述，例如success，error
alert(textStatus);
//ajax对象
alert(ajax.responseText);//是一个字符串
});
}

验证用户是否存在，使用$.post方法。如果页面有太多数据要发送，不需要一一写json格式的发送数据，只需要调用$(jquery对象).serialize()方法，它会自动将对象中有name属性的对象自动转换为json格式的数据。

function checkEmp(input){
var empName=$(input).val();
//去掉空格
empName = $.trim(empName);
if(empName.length == 0)
return;
var url="${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime();
//手动写json对象
var sendData = {
empName:empName
};
//jquery自动生成json对象
//var sendData = $("form").serialize();
alert(sendData);
$.post(url,sendData, function (backData) {
//创建img标签
var $img = $("<img src='"+backData+"' height='14px' width='14px'/>");
//清空span，然后添加图片
$("span").text("");
$("span").append($img);
})
}

二级联动：

function getCity(province){
var index = province.selectedIndex;
if(index == 0)
return;
var $province = $(province[index]).text();
var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();
var sendData = {
province:$province
}
$.post(url,sendData,function(xml){
//清空city下拉菜单
$("#cityID option:gt(0)").remove();
//xml是js对象
var $xml = $(xml).find("city");
$xml.each(function(){
//text可以访问xml标签
var option = $("<option>"+$(this).text()+"</option>");
//添加到下拉菜单
$("#cityID").append(option);
});
})
}

$.ajax方式

function getCity(province){
var index = province.selectedIndex;
if(index == 0)
return;
var $province = $(province[index]).text();
var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();
var sendData = {
province:$province
}
$.ajax({
type:"POST",
url:url,
data:sendData,
success:function(xml){
//清空city下拉菜单
$("#cityID option:gt(0)").remove();
//xml是js对象
var $xml = $(xml).find("city");
$xml.each(function(){
//text可以访问xml标签
var option = $("<option>"+$(this).text()+"</option>");
//添加到下拉菜单
$("#cityID").append(option);
});
}});
}

获取json数据

action方法

public class ProvinceCityAction extends ActionSupport{
private String province;
public void setProvince(String province) {
this.province = province;
//System.out.println("注入" + province);
}
//根据省份查询城市
public String findCityByProvince() throws Exception {
setCity = new LinkedHashSet<String>();
if("湖南".equals(province)){
setCity.add("长沙");
setCity.add("株洲");
}else if("广东".equals(province)){
setCity.add("广州");
setCity.add("中山");
setCity.add("佛山");
}
return SUCCESS;
}
private Set<String> setCity;
public Set<String> getSetCity() {
return setCity;
}
}

js

$("#province").change( function(){
//清空原城市下拉框中的内容，除第一项外
$("#city option:gt(0)").remove();
//获取选中的省份
var province = $("#province option:selected").text();
//如果选中的不是"选择省份"
if("选择省份"!=province){
$.ajax( {
type    : "POST",
url     : "${pageContext.request.contextPath}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),
data    : {"province":province},
success : function(backDate,textStatus,ajax){
//解析json文本
var array = backDate.setCity;
var size = array.length;
for(var i=0;i<size;i++){
var city = array[i];
var $option = $("<option>"+city+"</option>");
$("#city").append($option);
}
}
} );
}
} );