jquery方法整理

查找:

$("div").children()          //div中的每个子元素,第一层
$("div").find("span")        //div中的包含的所有span元素,子子孙孙

$("p").next()              //紧邻p元素后的一个同辈元素
$("p").nextAll()              //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()                //紧邻p元素前的一个同辈元素
$("p").prevAll()             //p元素之前所有的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").parent()              //每个p元素的父元素
$("p").parents()             //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾

$("div").siblings()          //所有的同辈元素,不包括自己

基本操作属性:

$("img").attr("src");               //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg");        //设置所有图像的src属性
$("img").removeAttr("src");           //将文档中图像的src属性删除

$("input[type='checkbox']").prop("checked", true);    //选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");            //删除img的src属性

CSS类:

$("p").addClass("selected");      //为p元素加上 'selected' 类
$("p").removeClass("selected");    //从p元素中删除 'selected' 类
$("p").toggleClass("selected");    //如果存在就删除,否则就添加

HTML代码/文本/值

$('p').html();               //返回p元素的html内容
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
$('p').text();               //返回p元素的文本内容
$("p").text("nick");           //设置p元素的文本内容
$("input").val();             //获取文本框中的值
$("input").val("nick");          //设置文本框中的内容

样式css操作:

样式:

$("p").css("color");              //访问查看p元素的color属性
$("p").css("color","red");        //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });    //设置p元素的color为red,background属性为yellow(设置多个属性要用{}字典形式)

位置:

$('p').offset()             //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()           //元素相对父元素的偏移,对可见元素有效,Object {top: 117, left: 250}

$(window).scrollTop()          //获取滚轮滑的高度
$(window).scrollLeft()         //获取滚轮滑的宽度
$(window).scrollTop('100')       //设置滚轮滑的高度为100

事件:

$("p").click();              //单击事件
$("p").dblclick();            //双击事件
$("input[type=text]").focus()    //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()     //元素失去焦点时,触发 blur事件
$("button").mousedown()  //当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()     //当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时

猜你喜欢

转载自www.cnblogs.com/shandayuan/p/10454740.html