首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 互联网 >

jquery-小结

2012-12-13 
jquery-总结jQuery的另一好处。控制与html分离? ? ? ? //不用在html上加,onblur()? ? ? ? $(#loginname)

jquery-总结

jQuery的另一好处。控制与html分离

? ? ? ? //不用在html上加,onblur();

? ? ? ? $("#loginname").blur(function(){

?

onchange 绑定2个方法,2个都会执行,按先后顺序。

?

jQuery包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

但是$(this)只能操作jquery对象。他们的区别是

$(this).attr(’title’, ‘Test’);<==>this.title = "Test";

ajax

$.ajax({

? ? ? ? ? ?type: "POST",

? ? ? ? ? ?url: "some.php",

? ? ? ? ? ?data: "name=John&location=Boston",

? ? ? ? ? ?success: function(msg){

? ? ? ? ? ? ?alert( "Data Saved: " + msg );

? ? ? ? ? ?}

});

?

遍历循环:

? ? ? ? $("img").each(function(i){

? ? ? ? ? ? ? ? //this指DOM对象(html元素)其实是JavaScript的操作,$(this)是jquery对象,只能用jquery方法。

? ? ? ? ? ? ? ? this.src = "test" + i + ".jpg";

? ? ? ? });

? ? ? ? $("img").get(0);

?

?

一、属性:

? ? ? ? 属性:

? ? ? ? ? ? ? ? 显示属性$("img").attr("src");

? ? ? ? ? ? ? ? 设置属性$("img").attr("src","test.jpg");

? ? ? ? ? ? ? ? 批量设置属性$("img").attr({ src: "test.jpg", alt: "Test Image" });

? ? ? ? ? ? ? ? 变量值设置属性$("img").attr("title", function() { return this.src });

? ? ? ? ? ? ? ? 删除属性$("img").removeAttr("src");

?

CSS-class

? ? ? ? ? ? ? ? $("p").addClass("a b");; ? ? ? ?

? ? ? ? ? ? ? ? $("p").removeClass("a");$("p").removeClass();

? ? ? ? ? ? ? ? $("p").toggleClass("a");//如果存在(不存在)就删除(添加)一个类。

? ? ? ? ? ? ? ? ?$(this).toggleClass("a", count++ % 3 == 0);//表达式为true就加上,否则删除class

?

? ? ? ? html

? ? ? ? ? ? ? ? .html();

? ? ? ? ? ? ? ? .html("hello world!");

?

? ? ? ? val

? ? ? ? ? ? ? ? $("input").val();

? ? ? ? ? ? ? ? $("input").val("hello world!");

?

三、选择器

? ? ? ? $("#myId")

? ? ? ? $("div")

? ? ? ? $(".myClass")

? ? ? ? $("span,p.myClass")并列

? ? ? ? $("form input")层级

? ? ? ? $("input:[type='button'],[type='reset']")

? ? ? ? p.myClass(p与.myClass同级),p .myClass(父子关系)

?

? ? ? ? $("form > input")父子关系

? ? ? ? $("form input")父,子孙全部后代关系

? ? ? ? $("label + input")//匹配所有(紧接在 prev 元素后的 next 元素)

? ? ? ? $("form ~ input")//匹配 prev 元素之后的所有 siblings(兄弟) 元素

?

:*代表的是过滤条件。 ? ? ? ?

? ? ? ? $("tr:first")//查找表格的第一行,:first匹配找到的第一个元素

? ? ? ? $("input:not(:checked)")//???用法

? ? ? ? $("tr:even")

? ? ? ? $("tr:odd")//表格的2,4,6行。

? ? ? ? $("tr:eq(1)")//表格的第二行。

? ? ? ? $("tr:gt(0)")//index从 0 开始计数

?

? ? ? ? $("div:contains('John')")//所有包含 "John" 的 div 元素

? ? ? ? $("td:empty")//所有不包含子元素或者文本的空元素

? ? ? ? $("div:has(p)").addClass("test");//给所有包含 p 元素的 div 元素添加一个 text 类

? ? ? ? $("td:parent")//所有含有子元素或者文本的 td 元素

? ? ? ? $("tr:hidden")//查找隐藏的 tr

? ? ? ? ? ? ? ? style="display:none"或type="hidden"的都查出来。

?

? ? ? ? $("div[id]")//查找所有含有 id 属性的 div 元素

? ? ? ? $("input[name='newsletter']")//查找所有 name 属性是 newsletter 的 input 元素

? ? ? ? $("input[name!='newsletter']")?

? ? ? ? $("input[name^='news']")//查找所有 name 以 'news' 开始的 input 元素

? ? ? ? $("input[name$='letter']")//查找所有 name 以 'letter' 结尾的 input 元素

? ? ? ? $("input[name*='man']")//查找所有 name 包含 'man' 的 input 元素

? ? ? ? $("input[id][name$='man']")//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

?

:*下面的也可以理解为过滤条件。???

? ? ? ? $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

? ? ? ? nth-child(even)(odd)(3n)(2)(3n+1) ? ? ? ?

? ? ? ? $("ul li:first-child")//在每个 ul 中查找第一个 li

?

表单 ? ? ? ?

? ? ? ? $(":input")//查找所有的input元素

? ? ? ? $(":text")//查找所有文本框

? ? ? ? ? ? ? ? :password,:radio,:checkbox,...

表单属性

? ? ? ? $("input:checked")//查找所有选中的复选框元素

? ? ? ? $(":radio:checked")

?

过滤条件:

? ? ? ? $("p").eq(1)//获取第2个元素,index从0算起。

? ? ? ? ?$(this).hasClass("protected")//返回true,false

? ? ? ? $("p").filter(".selected, :first")//筛选出第一个以及带有selected类的元素

? ? ? ? $("p").filter(function(index) {return $("ol", this).length == 0;});//筛选出子元素中不含有ol的元素。

? ? ? ? $("p").not( $("#selected")[0] )//删除id="select"的p元素

? ? ? ? ? $("p").slice(0, 1).wrapInner("<b></b>");//取子集。

? ? ? ? ? $("div").children(".selected")//所有子元素

? ? ? ? $("p").contents().not("[nodeType=1]").wrap("<b/>");//查找所有文本节点并加粗

? ? ? ? //contents()元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

? ? ? ? $("p").find("span")//从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同

? ? ? ? $("p").next(".selected")//找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

? ? ? ? $("p").parent()//查找每个段落的父元素//$("p").parent(".selected")

? ? ? ? $("span").parents()//找到每个span元素的所有祖先元素。(不包含根元素)

? ? ? ? $("p").prev()//找到每个段落紧邻的前一个同辈元素。

? ? ? ? $("div").siblings()//找到每个div的所有同辈元素。

? ? ? ? $("div").find("p").andSelf().addClass("border");//选取所有div以及内部的p,并加上border类

?

文档处理:插入时,若已存在,则为移动。

? ? ? ? 内部插入:

? ? ? ? ? ? ? ? $("p").append("<b>Hello</b>");//向所有段落中追加一些HTML。

? ? ? ? ? ? ? ? $("p").appendTo("div");//把所有段落追加到div中

? ? ? ? ? ? ? ? $("p").prepend("<b>Hello</b>");//向所有段落中前置一些HTML标记代码。

? ? ? ? ? ? ? ? $("p").prependTo("#foo");

? ? ? ? 外部插入:

? ? ? ? ? ? ? ? $("p").after("<b>Hello</b>");//在所有段落之后插入一些HTML标记代码。

? ? ? ? ? ? ? ? $("p").before("<b>Hello</b>");//在所有段落之前插入一些HTML标记代码。

? ? ? ? 包裹:

? ? ? ? ? ? ? ? $("p").wrap("<div class='wrap'></div>");//把所有的段落用一个新创建的div包裹起来

? ? ? ? ? ? ? ? $("p").wrapInner("<b></b>");//把所有段落内的每个子内容加粗(包裹)

? ? ? ? 替换:

? ? ? ? ? ? ? ? $("p").replaceWith("<b>Paragraph. </b>");//把所有的段落标记替换成加粗的标记。

? ? ? ? 删除:

? ? ? ? ? ? ? ? $("p").empty();//把所有段落的子元素(包括文本节点)删除

? ? ? ? ? ? ? ? $("p").remove(".hello");//从DOM中把带有hello类的段落删除

?

CSS

? ? ? ? $("p").css("color","red");

? ? ? ? $("p").css({ "margin-left": "10px", "background-color": "blue" }); ? ? ? ?

? ? ? ? 其他略 ? ? ? ?

?

事件:

? ? ? ? 不是所有的元素都有所有的事件。比如p元素就没有blur事件。

? ? ? ? $("p").click();//模拟单击,触发click事件。

? ? ? ? 页面载入

? ? ? ? ? ? ? ? $(function() { ...});<==>$(document).ready(function(){...});

? ? ? ? 事件处理

? ? ? ? ? ? ? ? bind(type, [data], fn)//绑定一个事件处理器函数。

? ? ? ? ? ? ? ? ?如果想取消(浏览器)默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false

? ? ? ? ? ? ? ? function handler(event) {alert(event.data.fo2);}

? ? ? ? ? ? ? ? ? $("p").bind("click", {fo1: "b1",fo2:"b2"}, handler)//绑定函数handler

? ? ? ? ? ? ? ? ? $("p").bind("click", function(){alert( $(this).text() );});

?

?

? ? ? ? ? ? ? ? $("p").bind("myEvent", function (event, message1, message2) {

? ? ? ? ? ? ? ? ? ? ? ? alert(message1 + ' ' + message2);

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? $("p").trigger("myEvent", ["Hello","World!"]);//触发某类事件

?

live

? ? ? ? $("p").live("click", function(){...}//live类似bind

? ? ? ? //用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。

? ? ? ? 比如说,如果你给页面上所有的li用live绑定了click事件。

? ? ? ? 那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用 ? ? ? ?

? ? hover

模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("p").hover(

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? function () {alert(1);},

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? function () { alert(2);}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );

toggle开关

每次点击后依次调用函数。

? ? ? ? $("li").toggle(

? ? ? ? ? ? ? function () {

? ? ? ? ? ? ? ? $(this).css({"list-style-type":"disc", "color":"blue"});

? ? ? ? ? ? ? },

? ? ? ? ? ? ? function () {

? ? ? ? ? ? ? ? ? ? ? ? $(this).css({"list-style-type":"disc", "color":"red"});

? ? ? ? ? ? ? },

? ? ? ? ? ? ? function () {

? ? ? ? ? ? ? ? $(this).css({"list-style-type":"", "color":""});

? ? ? ? ? ? ? }

? ? ? ?);

?

$("#"+textid).attr("disabled")

变量时,这样用$("#"+textid)。$("input[id$=text]:not(:disabled)")

?

工具:数组对象的操作。

?

css里没有disabled readonly属性,可以通过jquery的inputs.attr("disabled","disabled");来实现。

?

?

模拟单击事件,事实上你并没有单击,而是系统替你完成的?

1.$(document).ready(function(){ ??

2. ? ?$("#btnParent h3").trigger("click"); ??

3.}); ?

?

select的readonly无效。用disabled=true,用隐藏域来进行传值,或


热点排行