jquery 学习

1. jquery 总结

   /** * jquery主要包含：选择器，dom操作，css控制，动画，事件 */

   
   

   /**  * 选择器  * 选择器使用方式  * 1、使用冒号：$(":radio") $("ul li:even")等等  * 2、标签名字：$("div") $("select option") $("input")等等  * 按钮也有image <input type="image" src=""/>*/

            //:fistconsole.debug($("dd:first").html());//:lastconsole.debug($("dd:last").html());//:notconsole.debug($("dd:not(:first)").html());//:containsconsole.debug($("dd:not(:contains('1'))").html());//:hasconsole.debug($("dl:has(.dd1)"));//:hidden :visible$("#testDisplay").click(function(){if($("div:hidden")){$("div:hidden").show(3000);}if ($("div:visible")) {$("div:visible").hide(2000);}});//siblingsconsole.debug($("dd").siblings(".dd1"));//查询div的class元素console.debug($("div.div2"));//:eqconsole.debug($("dd:eq(1)"));//.classconsole.debug($(".dd1").text());//*表示所有的标签console.debug($("*"));//.:emptyconsole.debug($(":empty"));//标签头获得标签console.debug($("dd"));//:lt :gtconsole.debug("lt=="+$("dd:lt(1)")+"gt=="+$("dd:gt(0)"));// + > ~ 选择console.debug($("dl dd")+">=="+$("dl>dt")+"+=="+$("dt+dd")+"~=="+$(".dd1~dd"));//属性选择console.debug($("input[name=text1]").val());console.debug($("input[name!=button1]").val());//name值以a开头的console.debug($("input[name^=a]").val());//name值以1结尾的console.debug($("input[name$=1]"));//多选择器console.debug($("input[id=text1][name=text1]"));//子元素console.debug($("ul li:nth-child(even/add/3n)"));//n是从零开始console.debug($("ul li:first-child"));console.debug($("ul li:last-child"));console.debug($("ul li:only-child"));//只有一个子元素// 表单选择器 按钮也有image <input type="image" src=""/>console.debug($(":rest/:image/:button/:text/:submit/:enable/:disable/:checked/:selected").val());console.debug($(":checkbox").length);console.debug($("select option:selected").val());

            

/** * jquery事件 * 触发事件：满足条件就发生 * 注册事件：给标签注册事件 * 例如：如果文档加载完毕触发div的click事件，那么不带fn的就会触发，但是带fn的就不会触发，需要点击才能触发。 */$("div").click();//触发事件$("div").click(fn);//注册事件/** * jquery dom操作 * 创建元素ping html $(html) 完成，然后使用append,before,after等方法，插入到指定位置 * 删除元素 remove方法，empty方法 * 修改属性attr方法  * 由事件触发删除元素 * 获得值的方式：text(),val(),html()。同时这几个方法还可以设置值 ** text(),html(),val()区别 * text()取纯文本 * html()取文本和html标签 * val()属性值 */$("div").append("<h2>dom操作</h2>");//将h2和div2加到div中，当成他的子类$("div")append(function(index,html){});//appendTo  jquery对象调用方法，返回当前jquery对象$("msg").appendTo($("#div"));//还是当成了子类，只是是在div内部的前面$("input").prepend($("#div"));$("#div").after($("#div2"));//div的后面不是，div的子类$("#div1").before($("#div2"));//属性$("#div").attr("id");//获得div的属性$("#div").attr("id","div1");//设置id为div1$("<input type='file' id='fileid' name='filename'/>").append("form");//将上传文件的标签添加到form表单//清除元素$(this).remove();$("*").remove();$("div").empty();//清除所以的子节点//删除dom$("#div").click(function(event){var target = event.target;//触发事件的源，不用写兼容性代码if(target.nodeName = 'A'){//a标签触发的事件//执行操作,如果头父类，可以使用parentNode,依次找到。也可以使用jquery的方法，parents(“输入要找到的父类”).remove()}});//动态指定触发的事件源$("#div").delegate("a","click",function(){/** * 第一个参数是过滤器[name=username],[id=username],#username都行 * $(this)就是a标签对象。快速定位到了，触发源。上面那个方法就需要找触发源 */});//clone方法 设置为true，让克隆的对象具有原始对象的方法。不设置就没有克隆前的事件，方法$("#div").clone(true).text("cccc");/* * css 样式 */$("#id").addClass();$("#id").removeClass();$("#id").toggleClass();$("#id").hasClass();$("img").attr("src",".jpg").css({height : "",width : "11px"});/** * 动画 * hide，show，toggle * slideDown,slideUp,toggleSlide * fadein,fadeout,fadeto */$("div").hide(3000,function(){})//隐藏$("div"),show(3000,function(){})//显示$("div").toggle(3000,function(){});//切换隐藏，显示

缩小搜索范围的两种方式：

        var $ul = $("ul");console.debug($("b",$ul).size);//第一种console.debug($ul.find("b").size());//第二种