jquery 基础
1. 选择器 -------- 没有空格表示且,逗号表示和(或),空格表示后代(层级关系),〉表示孩子
PS:$可以接受2个参数,第二个参数是目标jquery对象,例如:$("p",$(document.getElementById("my_id")));
一般只要会单选就行了,其他的其实没有必要掌握
单选
$("p") 选择所有p元素
$(".ty1") 选择所有class="ty1"的元素
$("#fq1") 选择id="fq1"的元素
联合选【不带空格为联合选,即同时满足;带空格表示后代】
$("p.foo") 选择类型为p且class="foo" 的元素 注意 有空格没空格完全不同,空格表示其后代咯
$(".qq#div1") 选择class为qq,且id为div1的元素 注意 有空格没空格完全不同
组合选
$("p.foo,#bar) 选择class为foo的锻炼(p) 和id为bar的元素,注意逗号的隔断是((p.foo),(#bar))
层级
$("body .fsl")选择body元素内,所有的class="fsl"的元素(所有的后代,哪怕有嵌套的都适用)
$("div>.fqq")选择div元素内的直接自元素为class="fqq"的元素(>>表示隔2代的元素,>>>表示隔三代的元素.....依次类推,一般不用哦)
过滤器
$(".c1:first")选择class="c1"中的所有元素的第一个 同$(".c1").first()
$(".c1:last")选择class="c1"中的所有元素的最后一个 同$(".c1").last()
$(".c1:parent")选择class="c1"中的所有元素的父元素
$(".c1").eq(3); 找第3个元素(起始为0)
$(".c1[title=abc]")找出属性title为abc的c1元素,【属性过滤器】
$('[name=items]:checkbox')name属性为items,且type为checkbox的元素。
$('#id_form input:[name=username]')form表单下,name为username的input元素
找子 元素
$(".c1").children();所有子元素
$(".c1").children(".foo")找class=foo 的子元素
找父元素
$(".c1").closest("p");找最近的一级 符合条件的父元素。
$(".c1").parent();
2. 添加删除之类的 -------- 没有空格表示且,逗号表示和(或),空格表示后代(层级关系),〉表示孩子
$(".c1").append("a");//在</a>之前添加,添加在原来数据尾部。 orgin a
$(".c1").prepend("b");//在<a>之后添加,添加在原来数据头部。 b orgin a
$(".c1").before("be");//在<a>之前添加,添加在元素之前 be <a class="c1">b orgin b</a>
$(".c1").after("af");//在</a>之后添加,添加在元素之后 be <a class="c1">b orgin b</a>af
$(".c1").wrap("<strong>");//对选中的元素,用<strong>包裹 <strong> <strong /> <strong></strong>三者皆可,语法宽松
$....wrap ....wrapAll...wrapInner等 wrap系列的用法,直接百度搜索,感觉用的不多.
$(".c1").remove();整个删除 里面的内容和标签全部删掉
$(".c1").detach();整个删除 里面的内容和标签全部删掉,与remove不同的是 detach()还会返回所有被删除的内容,一般用来做复制到其他地方的作用。
在body最开始添加一个自定义的<p>
var para = $("<p>",{
"class":"c1",
"text":"hello ,I am jack",
"css":{"background":"yellow"}
}
);
$("body").prepend(para);
$("#id1").attr("class","ff0"); 修改class属性为ff0
$("#id1").attr("value","new value"); 修改value属性为new value
5. 显示 和隐藏
$("#id1").show(); //显示 不带效果
$("#id2").hide(); //隐藏 不带效果
$("#id1").show(2000,function(){}); //显示 带效果,在一定时间内慢慢显示
$("#id2").hide(2000,function(){}); //隐藏 带效果,在一定时间内慢慢消失
$("#id1").fadeIn(); //慢慢显示,色度有0->1
$("#id2").fadeOut(); //慢慢隐藏,色度有1->0
$("#id1").fadeIn(2000,function(){}); //慢慢显示,色度有0->1
$("#id2").fadeOut(2000,function(){}); //慢慢隐藏,色度有1->0
$("#id1").fadeTo(2000,0.5,function(){}); //慢慢到0.5的程度
$("#id1").slideUp(2000,function(){}); //慢慢隐藏,高度变化
$("#id2").slideDown(2000,function(){}); //慢慢显示,高度变化
$("#id2").slideToggle(2000,function(){}); //
7. 处理事件行为 ready,click等。
$(document).ready(function(){ //等DOM都准备好之后,才执行
$("#click_send_img").click(function(){//按钮的事件
$("#div_send_img").toggle();
$("#div_send_msg").toggle();
});
$("#XXX").focus(function(){//获得焦点
});
$("#XXX").blur(function(){//失去焦点
});
//也可以
$("#XXX").bind("click",function(){
//XXXXX
});
//停止事件冒泡,阻止默认行为
$("#XXX").click(function(event){
event.stopPropagation();//停止事件冒泡
event.preventDefalut();//阻止默认行为,如链接、表单提交。链接返回false也能阻止跳转。
});
});
也可以简写成
$(function(){
//xxxx do job.
});
8. DOM对象和jquery对象严格区分
jquery转dom:
var $cr = $("#cr");//jquery对象
var cr = $cr[0];//dom对象
或者//var cr = $cr.get(0);//dom对象
9. jquery的常用插件。
$(document).ready(function(){ //等DOM都准备好之后,才执行
(1)validation插件
可以验证email,url,phonte,idCard等。
(2)表单插件Form:jquery.form.js
不需要复杂得去拼接ajax中的data字段,尤其对提交文件效果非常好
(3)模态对话框,simplemodal
避免丑陋的alert对话框。
(4)cookie插件。jquery.cookie.js
$.cookie('token', response.data, { expires:365*100,path: '/' });//域名下所有路径
$.cookie('token', response.data, { expires:365*100,path: 'taobao.com' });//该域名下所有路径
$.cookie('token', response.data, { expires:365*100,path: '.taobao.com' });//该二级域名下所有路径
var c = $.cookie('token');//获得cookie
(5)query插件。jquery.query-2.1.7.js。
操作url,$.query.get("type");