<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> <style type="text/css"> .red{ color: red; } .box3{ width: 100px; height: 100px; background: red; } </style> </head> <body> addClass() 添加类名 removeClass() 移除类名 toggleClass() 添加或移除类名,这个方法很灵活，很舒服 html() 无参数时获取内部html或者有参数设置内部html text() 无参数时获取内部文本或者有参数设置内部文本 val() 获取或者设置表单元素的value css() 获取或者设置css样式 一个字符串参数 获取 一个对象 设置 两个参数 设置 attr() 给普通标签设置或者获取属性 removeAttr() 移除属性 prop() 给表单元素设置和获取属性 data() 给JQ对象设置属性 offset 偏移值 <div id="box">box</div> <div id="box1"> <span>span1</span><span>span2</span> </div> <div id="box2">111</div> <div id="box100"></div> <input type="text" name="" id="t"> <div class="box3"></div> <script type="text/javascript"> //开始这样<div id="box100"></div>， //添加属性后变成<div id="box100" name="zhangsan"></div> $("#box100").attr("name","zhangsan"); $("[name=zhangsan]").html("123") //因为有属性了，所有可以赋值 $("#box").addClass("red").click(function(){ // $(this).removeClass("red"); //this指id名为box对应的标签, toggleClass()这个方法有类就删除类，没类就添加类，很灵活，很舒服 $(this).toggleClass("red"); }); $("#box1").html("<span>hello</span>"); //设了参数就替换了原来的值 $("#box2").text("<span>hello</span>"); //设了参数就替换了原来的值，标签名也会写上去 $("#t").val("happy"); //给表单赋值的 $("#t").change(function(){ //输入框内容发生改变时,鼠标一移开马上触发 alert(123) }) $(".box3").css("background","#FFFF00"); //2个值设置宽度 $("#box").attr("index",0); //添加属性，2个参数添加属性，一个参数获得属性 $("#box").removeAttr("index"); //移除属性 </script> </body> </html>