文档串联处理
- 破坏性操作，增，删，换都是破坏性操作
- end：返回上一次破坏型操作之前的元素集合
$("outer").find(".inner").hide().show(200).end();//#outer
- add：新增任何集合，返回的就是一个新集合
console.log($("#outer").add("dshfds")); //返回的是[#outer,span],这个为什么不能显示在页面上
- addBack：当前集合加上上一次破坏型操作之前的集合,形成大集合
$("#third").nextAll().addBack().css("background-color","hotpink"); //3后面所有的div背景色变成枚红色
- attr()：设置或返回被选元素的属性值，属性值返回的cssText样式。
- prop()：与attr一样
- attr一般获取标签属性,返回一个样式的cssText
- prop设置属性
$("input[type=radio]").prop("disabled","disabled"); //为radio增加disabled
$("#outer").attr("id"); //#outer
$(".inner").attr("class") //.inner abcde
$(".inner").eq(4).attr("class") //.inner
$("img").attr({ src: "test.jpg", alt: "Test Image" });//为img添加src属性和alt属性
$("#outer").attr({"class":"abc","name":"bcd"});
//为attr添加class和name
- removeAttr():移除属性
removeProp():移除属性
$("input[type=radio]").removeProp("disabled","disabled");
$("#third").removeAttr("class"); //移除class属性
$("#outer").removeAttr("class name"); //删除class和name，以空格分隔，一次传入对个属性名
CSS类的操作
- addClass（class,fn（index,class））在原有的上面追加class值,接收两个参数
$("#outer").first().addClass("inner");//为div下的第一个添加class属性，first（），包括其自身
- removeClass()：从匹配的元素中删除class属性
$("#third").removeClass("inner");
- toggleClass():如果有这个class，就去掉，如果没有就增加,折叠和伸缩效果,互斥效果
$("#outer div").toggleClass("inner");
(this).next().toggleClass("hide");
}); //实现伸缩效果
HTML代码/文本/值
- html([val|fn])：获取文本内容和html标签
$("#third").html(); //3
$("#outer").html();//所有的子集元素
- text（[val|fn]）:返回对应元素的innerText
$("outer").text();//""
$("#third").text();//
"3"
- val():获取value值
$("input[type=submit]").val();//"提交"
$("select").val();
//"上海"
$(callback)和window.onload的了解
1.功能：当一段事件代码出现在控制台能执行，在页面中不能执行的时候，一定是事件触发的的时候，dom或者资源还没加载出来。此时这两者都是为了解决这个问题的。
2.区别：
- Windows.onload是dom0级事件，只能绑定一个有效的监听函数，后面的会覆盖前面的，而$(callback) 可以绑定多个
- window.onload等待图片css等资源全部加载完毕才会触发。而(callback)会快window.onload
- 一般写在head部分
window.onload=function(){
$(".inner").click(function(){
$(this).css("transform","scale(1.5,1.5)");
});
};
$(function(){
$(".inner").click(function(){
$(this).css("border-radius","50%");
});
});
$(function(){
$(".inner").click(function(){
$(this).css("background-color","#eee"); //js里面整数位可以省略
});
});
html和css
1
2
3
4
6
7
8
9
jauqry中的ajax是一个属性名
- jsonp,是一种js请求，不是ajax。也是可以请求同源数据，主要是跨域请求
- ajax函数支持jsonp请求，只不过不是ajax请求，jauqry中的ajax是一个属性名
- ajax函数支持jsonp请求，只不过不是ajax请求，jauqry中的ajax是一个属性名
$.ajax参数 - 第一个参数是URL，如果第一个参数不是字符串，会自己认为在当前内部第二个数，封装成对象，以键值对传入
$.ajax({
url:"data.json",//url
type:"post",//请求方式
data:{name:"张三",age:28},//上送数据
async:true, //同步异步
headers:{key:"111"}, //设置请求头中的属性，设置在报文头部中，也可以在函数中动态添加
dataType:"jsonp" ,//数据类型，改成jsonp
beforeSend:function(xhr){ //发送前执行函数,参数是通信对象
//写信后悔了，xhr.abort();撤销当次请求，通常在beforsend中设置
xhr.abort(); //经常用于设置请求头setRequestHeader
console.log(xhr); //readyState为0 ,因为这不是源生js，是包装过的，没有
xhr.setRequestHeader("key2",2222);
},
success:function(data,textState,jqXHR){ //请求成功执行该函数，包括数据返回，格式标准
console.log(data); //返回数据中文对象
console.log(textState);//通信状态success(与)
console.log(jqXHR);//
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //请求异常时执行该函数，能拦住错误的都是try和catch.这是源生的框架
console.log(data); //返回数据中文对象
console.log(textState);//通信状态success(与)
console.log(jqXHR);//
},
complete:function(){ //无论请求完成最后执行的函数，无论是否请求成功，都会执行里面的函数
console.log(111)；
}
});
- 方便修改传参方式
$.ajaxSetup({
url:"data.json",//url
type:"post",//请求方式
data:{name:"张三",age:28},//上送数据
async:true, //同步异步
headers:{key:"111"}, 设置请求头中的属性，设置在报文头部中，也可以在函数中动态添加
dataType:"json" ,//数据类型
});//初始化
iquery事件
- bind ,绑定事件
- delegate委托 ，少用
- on