jQuery/Ajax
jQuery
是一个js文件，封装了大量js常用功能形成的前端框架，可以简化js开发，优化HTML文档操作、时间处理、动画设计和ajax交互。
链式语法：$(#id).text().css().css(). …
兼容css3
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
//引入在线资源，引入资源和写js内容必须分开
<!-- <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> -->
//引入本地资源
<script src="jQueryImport.js" type="text/javascript"> </script>
<script>
//解析到本行时，body内容还未被解析，故以下代码必须写$(function(){}里面，表示页面加载完执行，否则会出现找不到对应元素的情况（如果不写$(function(){}，script代码块应放在body后面）
$(function(){
$("#b1").click(function(){
$(this).css({"color":"white","background":"red","width":"100px","height":"45px",}).text("啦啦啦");
$("#b2").text("略略略");
});
});
</script>
<body>
<button id = "b1">按钮1</button>
<button id = "b2">按钮2</button>
</body>
</html>
jQuery与JavaScript对象转换
jQuery与JavaScript方法不通用
jQuery对象[下标] --->Js对象 JQuery对象使用选择器
$(Js对象) --->jQuery对象
jQuery事件
| 事件类型 | js写法 | 特点 | jQuery写法 | 特点 |
|---|---|---|---|---|
| 页面加载事件（入口函数） | οnlοad=function(){} | 定义多个οnlοad=function(){},后面的会覆盖前面的，即只执行最后一个事件 | $(function(){}); | 定义多个，按顺序依次执行 |
| 点击事件 | 对象.οnclick=function(){} 对象.onbdlclick=function(){} | $("#id").click(funtion(){}); $("#id").dblclick(funtion(){}); | ||
| css事件 | 对象.style.属性名=“属性值” | $("#id").css({“属性名”:“属性值”,“属性名”:“属性值”,…}) |
jQuery+css选择器
选择器返回的一定都是数组！！！可以用length获得长度（数量），用下标获取元素
//元素选择器+层级选择器（子代选择器）+类选择器
$("div > .a").css("background","red");
//元素选择器+并集选择器+ID选择器
$("button,#div3").css("background","blue");
//元素选择器
$("button").css("color","white");
//通配符选择器
$("*").css("border","black 1px solid");
//属性选择器
//所有包含name属性的
$("[name]").css("color","red");
//属性='' 属性为''
$("button[name='neirong'][id='d3b3'],span[class='b']").css("color","yellow");
//不含class属性的,以及class属性值不为a的全部会被选中
$("[class!='a']").css("border","red solid 1px");
//属性^='' 属性以''开头
$("[name^='nei']").css("border","none");
//属性*='' 属性含''
$("[name*='g1']").css("border","black 2px solid");
//属性$='' 属性以''结尾
$("[name$='4']").css("color","green");
//层级选择器
//子代选择器(div 的直接后代input)
$("div > input").css("color","red");
//子孙选择器(div 的所有后代input)
$("div input").css("border","blue 1px solid");
//兄弟选择器(所有div 后面的同级input)
$("div~input").css("background","yellow");
//相邻兄弟选择器(div 后面紧邻的的同级input)
$("div+input").css("fontSize","46px");
//过滤选择器
//首个 :first /最后一个 :last (如果有多个ol，一共只能定位到最后一个)
$("ol>li:first").css("color","red");
//奇数个
$("ol>li:odd").css("color","blue");
//偶数个
$("ol>li:even").css("background","gray");
//下标为3的(下标从0开始)
$("#o2>li:eq(3)").css("border","3px solid green");
//下标小于2的(lt:less than)
$("#o2>li:lt(2)").css("background","yellow");
//下标大于5的(gt:greater than)
$("#o2>li:gt(5)").css("fontSize","32px");
//不包含#l 这个属性的(#1 即 id="l")
$("#o1>li:not(#l)").css("border","3px solid pink");
//状态过滤选择器
//可用的
$("input:enabled").css("background","hotpink");
//不可用的 被赋予了disabled属性的
$("input:disabled").css("background","limegreen");
//checked 被选中的,可用于radio和CheckBox
$("#c1").click(function(){
alert($("input:checked").length);
})
//selected 被选中的,可用于option
$("#b").click(function(){
alert($("option:selected").length);
})
DOM操作
text()获取或设置内容文本
val()获取或设置属性值
html()获取或设置整个结构
属性操作
| attr(“属性名”) | 获取属性值 | |
| attr(“属性名”，“属性值”) | 添加/替换属性值 | |
| removeAttr(“属性名”) | 移除属性（名和值都移除） | |
| prop(“属性名”) | 获取属性值 | |
| prop(“属性名”，“属性值”) | 添加/替换属性值 | |
| removeProp(“属性名”) | 移除属性值 | （测试无效？） |
| <div class=“a b c”> 这是一个div ，同时应用 a b c三种class </div> | ||
| addClass(“d”) | 追加class属性的值 | <div class=“a b c d”> |
| removeClass() | 删除class属性的全部值，但保留class这个属性 | <div class > |
| removeClass(“b”) | 针对性删除b这个class值 | <div class=“a c”> |
| toggleClass(“b”) | 切换b这个class值的有无 | <div class=“a c”> 切换 <div class=“a b c”> |
| $(“a”).append($(“b”)) | 将b标签元素整个添加到a元素中，末尾位置 | <a>aaa <b>bbb</b> </a> |
| $(“a”).prepend($(“b”)) | 将b标签元素整个添加到a元素中，开头尾位置 | <a> <b>bbb</b> aaa</a> |
| $(“a”).appendTo($(“b”)) | 将a标签元素整个添加到b元素中，末尾位置 | <b>bbb <a>aaa</a> </b> |
| $(“a”).prependTo($(“b”)) | 将a标签元素整个添加到b元素中，末尾位置 | <b>bbb <a>aaa</a> </b> |
| $(“a”).after($(“b”)) $(“a”).insertAfter($(“b”)) | 将b标签元素放到a元素后 | <a>aaa</a> <b>bbb</b> |
| $(“a”).before($(“b”)) $(“a”).insertBefore($(“b”)) | 将b标签元素放到a元素前 | <b>bbb</b> <a>aaa</a> |
| $(“a”).remove() | 将a标签元素（及其后代标签元素都删除） | |
| $(“a”).remove() | 将a标签元素的后代标签元素删除（保留a标签） |
Ajax Asynchronous(异步的）JavaScript and Xml
概念
局部刷新：不用重新加载整个页面就能与服务器交换数据，更新页面
原生AJAX
创建对象（新版）
var xmlhttp = new XMLHttpRequest();
方法
open（String 提交方式，String 提交地址，Boolean 是否异步）
send（String参数/无参）
xmlhttp .open("get","url?a=b&a=b",true);
xmlhttp.send();
get方式提交，send必须使用无参的，因为数据是以？键值对形式拼接到URL后面的
xmlhttp .open("post","url",true);
xmlhttp.send(String 参数);
post方式提交，send必须使用有参的，参数为要提交的数据 键值对形式
JQuery+AJAX
方法
$.ajax(键值对)
参数一般6对
$.ajax（{
url:"String url"
type:"String 提交方式GET/POST，默认get",
data:"json的数据内容{"":"","":""}",
success:function(){} 请求成功后执行的函数（Callback回调函数
----以上为一般需要，以下为可选---
datatype:"响应结果的数据类型",
error:"发生异常时执行的回调函数"}）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="jQueryImport.js"></script>
<body>
<p id="timer">0</p>
<div>
<input type="text" />
<button onclick="f(this)">提交后转换</button>
答案1：<span class="status"></span>
</div>
<div>
<input type="text" />
<button onclick="f(this)">提交后转换</button>
答案2：<span class="status"></span><br/>
</div>
</body>
<script type="text/javascript">
function f(t){
var name = $(t).siblings("[type='text']").val();
//ajax方式（不常用）
$.ajax({
//请求的目标地址
url:"t",
//请求的方式
type:"GET",
data:{name:name},
//jQuery封装后隐含xmlHttpRequest对象调用回调函数,返回的实参再回调函数中定义一个形参来接收
success:function(d){
$(t).siblings(".status").text(d);
},
//如果出现异常后调用的回调函数
error:function(){
alert("error");
},
//返回的数据类型，返回String一般会用 text/json两种
datatype:"text"
})
//get方式(get/post不用写键值对，参数位置不能改变)
$.get({
"t",
{name:name},
function(d){
$(t).siblings(".status").text(d);
},"json"
})
//post方式
$.post({
"t",
{name:name},
function(d){
$(t).siblings(".status").text(d);
},"json"
})
}
var i=0;
onload=function(){
it = setInterval(timer,500);
}
function timer(){
i += 1;
document.getElementById("timer").innerText=i;
}
</script>
</html>
1757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
