JQuery 使用手册摘录

//筛选出name以 “$chkIsLock” 结尾的 checkbox 控件,返回值类型:数组
$("input[type='checkbox'][name$='$chkIsLock']");

1、//将一个JQuery对向转化为DOM对象
var a = $("#div1")[0] 或者 var a = $("#div1").get(0)

2、//Jquery选择器
$("body *")  //取得body下所有的元素
$("div, #abc, p .myclass")  //选择所有div,所有span, 所有p 且类名为myclass
$(".classname")  //查找有css的元素
$("#abc span"); //选择#abc下的所有儿子孙子span元素(多层)
$("#abc > span")  //选择#abc下的儿子span元素(孙子不管)
$("#abc + span") =  $("#abc").next("span") //选取#abc下的紧挨着的一个span兄弟元素
$("#abc ~ span") = $("#abc").nextAll("span") //选取#abc后面的所有span兄弟元素(只要是兄弟都可以,前面的不管)
$("#abc").).siblings("div") //找到兄弟层的div

//下面这些过滤选取器,从后往前读
$("div:first") //选取第一个div元素
$("div:last") //选取最后一个div元素
$("input:not(.myclass)") //选取class不是myclass的input元素
$("tr:even") //选取索引是偶数的tr 从0开始
$("tr:odd") //选取索引是奇数的tr 从0开始
$("tr:eq(1)")  //选取索引等于2的元素
$("tr:gt(1)") //选取索引大于1的元素,不包括1
$("tr:lt(1)") //选取索引小于1的元素,不包括1

$("div:contains('我们')")  //选取内容含有"我们"的div元素
$("div:has(p)") //选取含有p元素的div元素
$("div:parent") //选取拥有子元素(含文本元素)的div元素
$("div:empty")  //和上面对应,选取为空(不含元素及文本)的div
$("div:hidden") //选取蕴藏的div
$("div:visible") //选取所有可见的div
$("div:animated") 选取正在执行动画的div元素

$("div[id]") //选取拥有属性id的元素
$("div[id=div1]") 选取id属性为div1的div
$("div[id!=div1]")
$("div[title=test]") //选取属性title为"test"的div
$("div[title!=test]") //选取属性title不为"test"的div

$("div[title^=test]") //选取属性title以"test"开始的div
$("div[title$=test]") //选取属性title以"test"结束的div
$("div[title*=test]") //选取属性title含有"test"的div
$("div[id][title*=test]") //选取拥有属性id 并且属性title含有"test"的div
$("input[type=checkbox]") //取得所有的checkbox也可以写成: $(":checkbox");

$("ul li:first-child")  //选取每个ul 中第一个li
$("ul li:last-child")  //选取每个ul 中最后一个li
$("ul li:only-child")  //选取每个ul 只有一个子元素的li

$("form :enabled")  //选取form下的所有可用的元素
$("form :disabled")  //选取form下的所有不可用的元素
$("input:checked")  //选取所有被选中的input元素
$("select:selected")  //选取所有被选中的选项元素

$("#div1 li:even", $(this))  //相对选择器,第二个参数传递一个jquery对象,则相对于这个对象为基准进行相对选择

//区别
$("#myform :input") //会获取到所有input textarea select button元素
$("#myform input")  //获取到所有的input元素

$(".test :hidden") //选取class为test的元素当中的隐藏子元素(下层)
$(".test:hidden")  //选取隐藏的class为test的元素(从后往前读)

$(":input")  //包含input、textarea、select、button
$(":text")  //选取所有单行文本框. 同理还有:radio  :checkbox :submit :image :reset :button :file :hidden


3、属性
e.pageX  //鼠标的横坐标
e.pageY
e.target  //是最原始的元素(冒泡的起始元素),与this不一样
e.altKey  //返回是bool值 shiftKey  keyCode(小键盘与主键盘的keyCode不一样) charCode(即是ASC码)

4、JQuery 方法
$("input").length
$("body").children()
$("#abc").css("opacity","0.5");  //将css的透明程度为0.5

$("input").text();  //返回仅是文本
$("input").html();  //返回含html标签文本

$("#div1").show()  //元素显示
$("#div1").hide(10000)
$("#div1").toggle()   //方法隐藏与显示切换

$("#div1").next();  //方法,获得下一个元素
$("#div1").prev();  //前一元素
$("#div1").next("p") //获得下一个p元素
$("#div1").nextAll() //获得所有
$("#div1").siblings("div")  //取得所有兄弟

$("br").replaceWith("<hr/>"); //接点替换
$("p").wrap("<font color='red'></font>"); //wrap方法将所选的元素用指定的标签包裹

attr()   //方法用来读取或者设置元素属性,对于Jquery没有封装的属性,例如 $("#cmd1").attr("disabled", true);
attr("class")   //获取样式
attr("class","myclass") //设置样式
attr({"name":"name1", "css":"mycss"})
removeAttr()

.addClass("myclass")  //追加样式
.removeClass("myclass") //移除样式
.toggleClass("myclass") //判断有无样式,如果有就移除,如果没有就添加
.hasClass("myclass") //判断是否有样式myclass 返回真假
.is(".myclass")  //和上面一样是否有class=myclass
.is(":visible") //判断是否可见


//根据html代码动态创建元素
$("div").append("<b>hello</b>");  //在div中的元素最后加
$("div").prepend("<b>hello</b>");  //把后面的加到div中元素最前面去

$("div").after("<b>hello</b>");  //在div后面加入,兄弟节点 还可以实现节点的移动
$("div").before("<b>hello</b>"); //在div前面加入,兄弟节点

var tempdiv = $("#div").remove()  //删除选中的元素,返回值为被删除的节点对象 (在移动选择项中常被用,从左移到右)
$("ul li").remove("li[title != 2]"); //将后面条件的元素删除
$("ul li:eq(1)").empty()  //清空,元素本身还在

$(this).clone()  //复制自己
$(this).clone(true)  //复制自己并有以前对象一切方法与属性

$("#div1").replaceWith("<a href='' >aaa</a>");  //替换元素
$("#div1").replaceAll("#div2");

$("p").wrap("<a href='' ></a>")  //将p用a包裹起来
$("p").wrapInner("<a href='' ></a>") //p还是在最外层,但p的内容放到a中


5、$.each() 方法与 $.map() 方法
a、//$.map方法对数组中每个元素进行处理,有返回值
<script type="text/javascript">
        var a1 = [1, 3, 5];
        var a2 = $.map(a1, function (item) {
            return item * 2;
        });
        alert(a2);

b、//$.each方法对数组中每个元素进行处理,没有返回值,对于var a1 = [1, 3, 5];相当于key=序号,value=数组值
var a3 = { "leo": 20, "juanually": 40, "tom": 50 };      
$.each(a3, function (key, value) {
            alert(key+"的年龄是:"+value);
        });
    </script>
 
c、//使用each方法对元素进行遍历
 $("input").click(function () {
     var arr = new Array();
     $("input:checked").each(function (key, value) {
          arr[key] = $(value).val(); //给数组付值,注意将Dom对象转成Jquery对象
      });
      $("#p1").text("共选中:"+arr.length+"项 "+arr.join(","));  //数组的join方法将字符串连起来
            });

d、//将所有的checkbox反选
$("#div1 input[type=checkbox]").each(function () {
     $(this).attr("checked", !$(this).attr("checked"));
 });


6、Jquery事件 return false 含下面二个
e.stopPropagation(); //终止冒泡事件,e:表示匿名函数增加一个参数,e就是事件对象
e.preventDefault(); //方法用来阻止默认行为。相当于window.event.returnvalue = false;
$("input").unbind("click") //取消click事件 ,如不加参数,则取消所有事件
$("#cmd1").one("click",function(){ alter("只执行一次的事件");})  //只执行一次的事件
$("input").trigger("click")  //模拟用户click事件

 

7、动画


$("#dtl").css("opacity", "0.5");  //设定透明度为0.5

$("#div1").toggle(1000);  //切换div1隐藏与显示
$("#div1").toggle( 1 == 1 );  //为true是显示, 为假时隐藏
$("#div1").toggle("fast",function(){ alert("Animation Done."); });

$("#dtl").animate({left:"+=200px",height:"400px", opacity:"1"}, 3000, function(){ alert(3);} ); //每次往左200、所需时间、回调函数

.fadeIn(2000)  //开始隐藏,利用透明度,最后完全看见
.fadeOut()

.slideUp() //从下往上收起来,最后看不见
.slideDown()  //开始隐藏,然后从下往下展开

 

 

posted @ 2013-09-17 14:50  xust  阅读(150)  评论(0编辑  收藏  举报