jQuery学习札记一

jQuery学习笔记一
jQuery学习笔记一
$("div:first").css("background","red");      //选择第一个DIV元素
$("div:last").css("background","red");       //选择最后一个DIV元素
$("div:not(.one)").css("background","red");  //选择CLASS不为ONE的 div:not(.one)
$("div:even").css("background","red");       //选择索引值为偶数的DIV元素 div:even
$("div:odd").css("background","red");        //选择索引值为奇数的DIV元素 div:odd
$("div:eq(3)").css("background","red");      //选择索引值为3的元素       div:eq(3)
$("div:gt(3)").css("background","red");      //选择索引值大于3的元素     div:gl(3)
$("div:lt(3)").css("background","red");      //选择索引值小于3的元素     div:lt(3)
$(":header").css("background","red");        //选择所有的标题元素 如h1 h2 h3... :header
$(":animated").css("background","red");      //选择当前正在执行动画的所有元素   :animated

slideToggle(speed,[callback]); 
speed可取值：slow,normal,fast
callback 回调函数[可选]

用600毫秒缓慢的将段落滑上或滑下 (只用于调整高度)
$("p").slideToggle("slow",function(){

});

//得到所有名字为check并且选中的复选框 然后遍历
var val = $("input[name='check']:checked");
val.each(function(i){
alert($(this).val());
});

//得到指定TABLE下的所有TR
<table id="tb">
<tbody id="tt">
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>

var trs = $("#td,#tt>tr");
或
var trs = $("table tbody tr");

$("div:contains(di)").css("background","red");    //选取含有文本"di"的DIV元素 div:contains(di)
$("div:empty").css("background","red");      //选取不含子元素或文本元素的DIV空元素  div:empty
$("div:has(.mini)").css("background","red");  //选取含有CLASS div:has(.min)
$("div:parent").css("background","red");     //选取含有子元素(或文本元素)的DIV元素

$("body:hidden").length        //整个网页中不可见的元素共有多少个
$("div:hidden").length         //不可见的DIV元素个数
$("input:hidden").length       //文本隐藏域的个数
$("div:visible").css("background","red");  //获取所有可见的DIV元素


----属性选择器
$("div[title]").css("background","red");      //选择含有属性TITLE的DIV元素
$("div[title=test]").css("background","red");  //选取含有属性TITLE的值等于Test的DIV元素
$("div[title!=test]").css("background","red"); //选取含有属性TITLE且值不等于test的DIV元素
$("div[title^=te]").css("background","red");   //选取含有属性TITLE且值以te开头的DIV元素
$("div[title$=est]").css("background","red");  //选取含有属性TITLE且值以est结尾的DIV元素
$("div[title*=es]").css("background","red");   //选取含有属性TITLE且值中含有es的DIV元素
$("div[id][title*=es]").css("background",red)  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的

元素.

----子元素过滤器
$("div.one:nth-child(2)").css("background","red"); //选取每个class为one的div父元素下的第2个子元素
$("div.one:first-child").css("background","red");  //选取每个class为one的div父元素下的第一个子元素
$("div.one:last-child").css("background","red");   //选取每个class为one的div父元素下的最后一个子元素
$("div.one:only-child").css("background","red");   //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

----表单
可用元素：<input name="add" value="可用文本框"/>  <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
$("#form1 input:enabled").val("xxx");    //对表单内 可用input 赋值操作
$("#form1 input:disabled").val("xxx");   //对表单内 不可用input 赋值操作.

//使用:checked选择器，来操作多选框.
$(":checkbox").click(functioin(){

});

$("select").change(function(){
var str = "";
$("select:selected").each(function(){  //遍历所有选中的下拉框的值
str += $(this).text()+",";
})
}).trigger("change");
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.

$("#form1 :text").length   //表单form1中的:text元素的个数

----特殊字符处理
<div id="id.a">aa</div>
<div id="id#b">bb</div>
<div id="id[1]">cc</div>

//特殊字符必须经过处理
var $id_a = $("#id\\.a");
var $id_b = $("#id\\#b");
var $id_c = $("#id\\[1\\]");

----选择器中的空格
<div class="test">
   <div style="display:none;">aa</div>
   <div style="display:none;">bb</div>
   <div style="display:none;">cc</div>
   <div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>

//////////////////////
var $t_a = $('.test :hidden');
var $t_b = $('.test:hidden');
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden') = "+len_a);  //输出 4
alert("$('.test:hidden') = "+len_b);  //输出 3
为什么$('.test :hidden')==4而$('.test:hidden')==3?
$('.test :hidden')
是指CLASS为test的某个元素下的子元素且为隐藏的个数
$('.test:hidden')
是指CLASS为test同时display为none的某个元素

--习题
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
/*
选取ul元素下的li元素的索引值大于5的集合元素后，去掉集合元素中的最后一个。
索引值从0开始。
*/
$("ul li:gt(5):not(:last)").hide();

----查找节点
//获取P节点
$("p");
// 获取第二个<li>元素节点
$("ul li:eq(1)"); // $("ul li:nth-child(2)")
//输出<p>元素节点属性title
$("p").attr("title")
//获取<ul>里的第二个<li>元素节点的属性title
$("ul li:eq(1)").attr("title")
//输出第二个<li>元素节点的text
$("ul li:nth-child(2)").text();

----创建节点
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");   //创建两个<li>元素

var $parent = $("ul")  //获取网页中存在的父节点
$parent.append($li_1).append($li_2);  //将创建的两个<li>元素 添加到ul中

----插入节点
var $li_1 = $("<li>aa</li>");
var $li_2 = $("<li>bb</li>");   //创建两个<li>元素
var $li_3 = $("<li>cc</li>");
var $parent = $("ul")  //获取网页中存在的父节点

$parent.append($li_1);  //将添加到父元素的最后面一个
$parent.prepend($li_2); //将添加到父元素的最前面一个
$li_3.insertAfter($("ul li:eq(1)")); //插入到指定位置之后

----移动节点
var $one_li = $("ul li:eq(1)");  取出UL中第二个LI元素节点
var $two_li = $("ul li:eq(2)");  取出UL中第三个LI元素节点
$two_li.insertBefore($one_li);   移动节点

----删除节点
vaf $li = $("ul li:eq(1)").remove();   //取出UL中第二个LI元素 将它干掉
// 把刚才删除的又重新添加到<ul>元素里
$li.appendTo("ul");
或
$("ul").append($li);
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它

$("ul li").remove("li[title=xx]"); 把LI元素中属性是XX的干掉

$("ul li:eq(1)").empty();   //找到第二个元素后 清空此元素的内容

----节点复制
$("ul li").click(function(){
// 复制当前点击的节点，并将它追加到<ul>元素
//但这样复制出来的副本 点击后没有此功能
$(this).clone().appendTo("ul");
//将clone(true)改为TRUE后 副本也有同样的功能
$(this).clone(true).appendTo("ul");
});

----替换节点
$("p").replaceWith("xxx");
或
$("xxx").replaceAll("p");

----包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来

----属性操作
$("p").attr("title","xxx");  //为P元素设置TITLE属性
$("p").attr("title");    //获取P元素的TITLE属性
$("p").removeAttr("title"); //删除P元素的TITLE属性

//获取样式
$("p").attr("class");
//设置样式
$("p").attr("class","hight");
//追加样式
$("p").addClass("hight");
//删除全部样式
$("p").removeClass();
//删除指定样式
$("p").removeClass("hight");
//重复切换样式
$("p").toggleClass("hight");
//判断元素是否含有某样式
$("p").hasClass("hight");
或
$("p").is(".hight");

----设置和获取HTML 文本和值
//获取<p>元素的HTML代码
$("p").html(); 
//获取<p>元素的文本
$("p").text();
//设置<p>元素的HTML代码
$("p").html("xxx");
//设置<p>元素的文本
$("p").text("xx");
//获取按钮的value值
$("#btn1").val();
//设置按钮的value值

$("#address").focus(function(){  // 地址框获得鼠标焦点

});

$("#address").blur(function(){  //失去焦点

});

//设置多选下拉框选中
$("#multiple").val(["选择2号", "选择3号"]);
//设置单选框和多选框选中
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);

//select控件
//移除属性selected
$("#id option").removeAttr("selected");
//设置属性selected
$("id option:eq(1)").attr("selected",true);

//设置单选框和多选框选中
$("[value=xx]:checkbox").attr("checked",true); //设置属性checked
$("[value=xx]:radio").attr("checked",true);  //设置属性checked

//得到子元素的总个数
var $ul = $("ul").children();
//遍历每个子元素
$ul.each(function(){
alert($(this).html());
});

//紧邻<p>元素后的同辈元素(即下一个元素)
var $p1 = $("p").next();
//紧邻<ul>元素前的同辈元素(即上一个元素)
var $p2 = $("p").prev();
//  紧邻<p>元素的唯一同辈元素
var $p3 = $("p").sibings();


----css-dom
//获取<p>元素的color
$("p").css("color");
//设置<p>元素的color
$("p").css("color","red");
//设置<p>元素的fontSize和backgroundColor
$("p").css({"fontSize":"30px","backgroundColor":"red"});
//获取<p>元素的高度
$("p").height();
//获取<p>元素的宽度
$("p").width();
//设置<p>元素的高度
$("p").height("100px");
//设置<p>元素的宽度
$("p").width("100px");
//获取<p>元素的的左边距和上边距
$("p").offset().left;
$("p").offset().top;

---- 超链接提示
<a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a>

$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title="";
var tooltip="<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip);
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
});
});

---- 合成事件

hover(over,out)
jquery api1.4.1
说明：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

$("td").hover(function(){
//当鼠标称到TD上时触发某事件
},function(){
//当鼠标移出时触发某事件
});

toggle(fn,fn2,[fn3..]);
每次点击后依次调用函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
$("td").hover(function(){
//当该TD第一次的时候触发该事件
},function(){
//当该TD第二次的时候触发该事件
});