查找:
$("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() //用户离开页面时