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第二次的时候触发该事件
});
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
个人学习jquery时的一些笔记,比较基础。
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
jquery 学习笔记源码 1第一个jquery
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
这是关于JQuery的学习过程中的一个笔记,当中记载了很多注意事项以及技巧,值得一看
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记,总结超经典!