一、jQuery引入与语法
1、引入：
从jQuery官方（Download jQuery | jQuery）下载源文件或者直接使用cdn即可 如：<script type="text/javascript" src="jquery-1.8.2.js"></script>
2、入口函数与基本语法：
// 标准形式:
$(document).ready(function(){
....
});
// 简写形式(常用)
$(function(){
....
});
事件操作语法
$(function(){
基本公式： $(选择器).事件(function(){......});
例：
});注：
$(document).ready(function(){...});
等价于：
jQuery(document).ready(function(){...});
都等同于js中的onload()方法
特别是在模板语法中，当使用$符合与之冲突时，就使用jQuery
jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的
1.执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
二、常用选择器
1、元素选择器：
主要是针对html标签元素名、表单元素名等进行选择：
//常用元素选择器
$("p") 所有<p>元素
$("ul>li") ul下的所有li节点
$("ul li:first") 每个<ul>的第一个li元素
$("ul li:fast") 每个<ul>的最后一个li元素
$("li").not("ul") li下没有包含ul节点的节点元素
$(".testcss:fast") 最后一个.testcss元素
$("input") 所有input元素
$("input[name='username']") name="username"的表单元素
$("input[name='aihao[]']") name="aihao[]"的复选框元素
$("input[name='aihao[]']:checked") name="aihao[]"的被选中的复选框元素
$("input[name='sex']:checked") 单选按钮被选中的元素
$("input[@type=radio][@checked]") type是radio的<input>元素
$("select[name='jiguan']") name="jiguan"的select元素
$("textarea[name='describe']")
$("input[@name=bar]") name是bar的<input>元素2、#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
$("#test") id="test"的元素，等同于js中的document.getElementById("test");
$("div#intro .head") id="intro"的<div>元素中的 所有class="head"的元素3、.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
三、常用事件方法
事件基本语法：
$("选择器").action(function(){......});
1、鼠标事件
$(".css").click() 鼠标点击（单击）事件
$(".css").dbclick() 鼠标双击事件
$(".css").mouseenter() 鼠标经过事件
$(".css").mouseleave() 鼠标移开事件2、表单操作事件
只适用于from表单里相关元素的操作
1、$("#addForm").submit() 表单提交事件 ，此表单必须包含type="submit"的提交按钮
2、$("select[name='jiguan']").change() select选择菜单选中事件
3、$("input[name='username']").focus() 获取焦点时触发
4、$("input[name='username']").blur() 失去焦点时触发
3、键盘事件
四、Dom元素操作
1、获取或设置如下元素的值：
$(..).prop() 方法比 attr()好用
<p class="test" data-type-id="1"> 我是<b>测试</b>内容</p> (注意不能用驼峰法, 如data-typeId 是不行的)
<img src="/images/001.png" >
1、$(".test").html() 获取元素的内容（包括HTML标签） -- 我是<b>测试</b>内容
$(".test").html("重新写入内容")
2、$(".test").text() 获取元素的文本内容（过滤掉HTML标签） -- 我是测试内容
$(".test").text("重新写入内容")
3、$("img").attr("src") 获取此图片的src属性值 -- /images/001.png
$("img").attr("src", "/images/002.png") 改变其属性的值
4、$("input[name='categoryname']").prop("placeholder", "请输入品类名称"); 改变其属性的值
5、$(".test").data("type-id") 获取设置的data-type-id属性的值(注意不能用驼峰法, 如data-typeId 是不行的)2、添加新的HTML元素
1、$(".css").html("abc"); 把被选元素内的内容清空后填入新的内容
2、$(".css").append("abc"); 在被选元素原有内容的后面追加新内容
3、$(".css").prepend("abc"); 在被选元素的开头增加新内容
4、$(".css").after("abc"); 在被选元素(外部)之后插入内容
5、$(".css").before("abc"); 在被选元素(外部)之前插入内容3、删除元素
1、$(".css").remove(); 删除被选元素（及其子元素）
2、$(".css").empty(); 方法删除被选元素的子元素。 4、获取并设置css
1、$(".css").addClass('cssname') 向被选元素添加一个或多个类
2、$(".css").removeClass("cssname") 从被选元素删除一个或多个类
3、$("h1,h2,p").removeClass("blue"); 该方法对被选元素进行添加/删除类的切换操作,
如初始状态下，h1,h2 设置了.blue样式，而p没有设置，
第一次执行，h1,h2都删除了.blue 而p添加了此样式
第二次执行, h1,h2又添加了此样式， p删除了此样式。
依次交替
4、$(".css").css() 用于设置或获取某个样式属性的值
例：
$("p").css("background-color"); 获取被选元素的背景色
$("p").css("background-color","yellow"); 为其设置背景色
$("p").css({"background-color":"yellow","font-size":"200%"}); 设置多个元素的值5、获取元素的尺寸
1、width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
2、height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
3、innerWidth() 方法返回元素的宽度（包括内边距）。
4、innerHeight() 方法返回元素的高度（包括内边距）。
5、outerWidth() 方法返回元素的宽度（包括内边距和边框）。
6、outerHeight() 方法返回元素的高度（包括内边距和边框）。五、遍历
1、向上遍历
1、$(".css").parent() 返回被选元素的直接父元素(爸爸元素，而不是爷爷元素或叔叔元素)。该方法只会向上一级对 DOM 树进行遍历。
2、$(".css").parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
您也可以使用可选参数来过滤对祖先元素的搜索。返回的是多个，所有的。
$("span").parents("ul");
3、$(".css").closest("ul") 返回被选元素的第一个祖先元素，用于从当前匹配元素开始，逐级向上级选取符合指定表达式的第一个元素。 返回的是一个，最靠近被选元素的那个
4、$(".css").parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
示例：
2、向下遍历
1、$(".css").children() 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历
2、$(".css").find() 返回被选元素的后代元素，一路向下直到最后一个后代3、 同胞元素
同胞拥有相同的父元素
siblings()
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil()
prev()
prevAll()
prevUntil()4、元素过滤
1、first() 方法返回被选元素的首个元素。
2、last() 方法返回被选元素的最后一个元素。
3、eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
例：下面的例子选取第二个 <p> 元素（索引号 1）：
$("p").eq(1);
4、filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
例：下面的例子返回带有类名 "url" 的所有 <p> 元素：
$("p").filter(".url");
5、not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。
例：下面的例子返回不带有类名 "url" 的所有 <p> 元素：
$("p").not(".url");5、遍历方法
1、each() 遍历，为每个匹配元素
1、each() 为每个匹配元素规定要运行的函数。
$(selector).each(function(index,element){})
index - 选择器的 index索引 位置。
element - 当前的元素（也可使用 "this" 选择器）
例：批量获取如下元素的值
<from>
名称：<input type="text" name="titles">
名称：<input type="text" name="titles">
名称：<input type="text" name="titles">
爱好:
<input type="checkbox" name="aihao" value="1"> 1
<input type="checkbox" name="aihao" value="2"> 2
<input type="checkbox" name="aihao" value="3"> 3
</from>
<input type="button" value="提交">$("input[type='button']").click(function(){
var titles = '';
var aihaos = '';
var flag = true;
$("input[name='titles']").each(function(index, element){
if($.trim($(this).val()) == ''){
$(this).focus();
alert('名称不能为空');
flag = false;
return false;
}else{
titles += $(this).val() + ',';
}
});
titles = titles.slice(0,-1); //去掉最后一个
if(!flag){return false;}
alert(titles);
$("input[name='aihao']").each(function(index, element){
if($(this).prop("checked")){
aihaos += $(this).val() + ',';
}
});
aihaos = aihaos.slice(0, -1);
alert(aihaos);
});6、杂项
1、$(".css").hide()
2、$(".css").show()
3、$(".css").toggle() 六、ajax操作
1、$.ajax({})方法，
参数都是可选的，常用参数如下
$.ajax({
url: "save.php", // 规定发送请求的 URL。默认是当前页面。
type: "post", // 规定请求的类型（GET 或 POST 默认值GET）。
data:{ // 规定要发送到服务器的数据
'username':’张三’,
'sex':’男’,
'age':18
},
//async: true, // 默认值是 true 异步请求 false 同步请求
dataType: "json", // 预期(要求)服务器返回的数据类型 json,text,html,xml, 不设置，会自动判断,
beforeSend:function(){ // 发送请求前运行的函数,在发送请求之前调用
$(‘#show’).html(‘正在处理请等待......’);
},
//timeout: 2000, // 设置本地的请求超时时间（以毫秒计）。
success:function(data){ // 请求成功时调用 data为返回的数 success(result,status,xhr)
if(data.status == 1){
Alert(‘成功’);
}else{
Alert(‘失败’);
}
},
error:function(){ // 请求失败时执行
alert('请求出错');
},
});
例：
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
// 读取demo_test.txt的内容2、$.post(URL, param, callback, type)
多用于向指定的资源提交要处理的数据，POST方式请求
$.post(
'save.php',
{'username': 'zhangsan', 'sex':'男', 'age':22},
function(res){
成功后的回调函数
},
'json'
);3、$.get(URL, param, callback, type)
多用于 从指定的资源请求数据， GET方式请求
$.post(
'save.php',
{'username': 'zhangsan', 'sex':'男', 'age':22},
function(res){
成功后的回调函数
},
'json'
);4、load(URL, callback)
Query load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中语法
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称5、ajax中传递token的两种方法
1 放在请求头中
$.ajax({
type: "post",
url: "http:///test/getInfo",
headers: { //请求头
Accept: "application/json; charset=utf-8",
token: "" + token //这是获取的token
},
data:JSON.stringify(jsonDate),
contentType: "application/json", //推荐写这个
dataType: "json",
success: function(data){
console.log('ok');
},
error:function(){
console.log('error');
}
})
2、使用beforeSend方法设置请求头
$.ajax({
type: "post",
url: "http://aliyun.seatang.cn:8080/onlinejudge/test/getInfoById",
beforeSend: function(request) { //使用beforeSend
request.setRequestHeader("token", token);
request.setRequestHeader("Content-Type","application/json");
},
data:JSON.stringify(jsonDate),
dataType: "json",
success: function(data){
console.log('ok');
},
error:function(){
console.log('error');
}
})
6、跨域请求
<script type="text/javascript">
getIndexList();
function getIndexList(){
$.ajax({
url: "https://blog.vymeet.com/api/blog/getIndexList?rows=6",
type: 'GET',
dataType: "jsonp",
jsonp: "callback",
success:function(data){ // 请求成功时调用 data为返回的数 success(result,status,xhr)
var html = '';
if (data.total ==0){
html += '<div> 暂无内容</div>';
$("#indexBlogList_a").empty();
}else {
var items = data.data;
for (var i = 0; i < items.length; i++){
html += '<div class="col-xm-12 col-sm-4 col-md-4 news_list" id="indexList_'+ i +' ">';
html += '<h4><a href="http://blog.vymeet.com'+items[i].url+'" title="'+ items[i].title +'" target="_blank">'+ items[i].title +'</a></h4>';
html += '<p class="new_list_w">';
html += ''+ items[i].summary +'';
html += '</p>';
html += '<div class="new_btn_w">';
html += '<span class="date_w">'+ items[i].createtime +'</span>';
html += '<a class="dropeft btn_default btn_hollow" href="http://blog.vymeet.com'+items[i].url+'" title="查看" target="_blank">查看</a>';
html += '</div>';
html += '</div>';
}
}
$('#indexBlogList').empty().html(html);
},
error:function(){ // 请求失败时执行
console.log('请求失败');
},
});
}
</script>
PHP部分
public function getIndexList()
{
$rows = $this->request->param('rows/d', 3);
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : '';
$postlist = Post::where(['status' => 'normal'])
->field('content', true)
// ->with('category')
->order('weigh desc,id desc')
->paginate($rows, false);
$indexList = $postlist->toArray();
if ($indexList['total'] > 0){
foreach ($indexList['data'] as &$rs){
$rs['createtime'] = date('Y-m-d', $rs['createtime']);
$rs['summary'] = strip_tags(mb_substr($rs['summary'],0,75, 'utf8'));
}
}
unset($rs);
//$this->success('请求成功', $indexList);
echo $callback."(".json_encode($indexList).")";
}
七、其它常用方法
1、e.stopPropagation() -- 阻止click事件冒泡到父元素
2、e.preventDefault() -- 阻止默认行为
$("#idTable").on("click", ".btn-delone",function (event) {
event.stopPropagation();
event.preventDefault();
.......
});event.stopPropagation(); //阻止click事件冒泡到父元素：如<li class="btn"><a>xxx</a> aaa</li> 你<a>上做了一个点击事件，又在“.btn”上做了一个点击事件，如果点击<a>时，执行完<a>的事件后会接着执行“.btn”的点击事件，e.stopPropagation();加上此方法就不执行“.btn”事件了
event.preventDefault(); //阻止默认行为，如<a>的链接跳转事件，submit的提交事件等。3、$.extend() -- 合并两个对象
var butTest = $.extend([],[]);
console.info(butTest); //一个空的数组对象
var obj1 = {
name: 'Tom',
age: 21
};
var obj2 = {
name: 'Jerry',
sex: 'boy'
};
butTest = $.extend(obj1, obj2);
console.info(butTest); 合并两个对象，如果有键值相同的，后一个覆盖前一个 得到{name: "Jerry", age: 21, sex: "boy"}
4、$(".css").size() -- 获取当前需选择器在页面中出现的数量。
5、$(".css").trigger("指定事件名称") 触发选择器的指定事件，此事件已经定义好了。
# 初始执行选择器的change事件
$("select[name='row[pid]']").trigger("change");
#定义此选择器的change方法
$(document).on("change", "select[name='row[pid]']", function () {
、、、、、、
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
