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 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开,包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等...
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
锋利的JQuery学习笔记
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
**jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...
总的来说,这份"jQuery学习笔记"是一份全面的教程资料,涵盖了从基础到进阶的所有重要知识点。通过系统学习,你可以理解jQuery的核心原理,掌握其高效的操作DOM、处理事件、实现动画和进行Ajax通信的方法,从而提升...
这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...
**jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...
**jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...
### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...
在深入探讨jQuery的知识点之前,首先需要理解jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML...
圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了这个库的核心概念和实用技巧,对于想要深入理解jQuery或提升前端技能的开发者来说,无疑是一份宝贵的学习资源。 首先,jQuery的核心理念是"Write Less, Do More...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...