1.引入jquery包
<body> <div id = "d1" onclick="show(this)" name="div"><b>第一个DIV</b></div> <div class = "d">2222</div> <div class = "d">3333</div> <div class = "d">4444</div> <input type="text" name="uid" /> </body> <script type="text/javascript"> // js 取元素 var d = document.getElementById("d1"); document.getElementByClassName("d"); //数组 document.getElementByTagName("div");//根据标签名找 document.getElementByName("uid");//根据name找 //操作元素 //1.操作内容 d.innerText //获取文本 d.innerHtml //获取html代码 d.innerText = "hello"; //给元素赋值(文本) d.innerHtml = "<span style = 'color:red'>hello</span>"; //给元素赋值(HTML) 将原有内容替换 d.value //获取或设置表单元素的内容 //2.操作属性 d.getAttribute("name"); //获取属性的值 d.setAtrribute("bs","001"); // 设置属性 d.removeAttribute("bs"); //移除属性 //3.操作样式 d.style.fontSize //获取样式,必须是写在元素里面的(内联) d.style.fontSize = "36px"; //修改设置样式
//事件 function show() //需要在元素里加onclick
{
alert(div.innertText);
} //jquery 一般写在这里面 $(document).ready(funcion(e){ //jquery 取元素 var c =$("#d1");//根据ID找 var d = $(".d");//根据class for(var i = 0;i<d.lenght;i++) { alert(d.eq(i));//取元素,取出jquery对象 } }); $("div");//根据标签名找 $("[name=uid]"); //根据属性找 //操作元素 //1.操作内容 c.text(); //获取元素内容(文本) c.html(); //获取元素内容(html代码) c.text("hello");//给元素赋值(文本) c.html("<span style='color:red'>hello</span>"); //给元素赋值(html代码) c.val(); //操作表单元素的内容,可以取值赋值 //2.操作属性 c.attr("name");//获取属性 c.attr("bs","001"); //设置属性 c.removeAttr("bs"); //移除属性 //3.操作样式
c.css("font-size"); //取样式 ,内嵌的也可以取到
c.css("font-size","36px"); //设置样式
//事件
$("#d1").click(function(){
alert("aa");
})
$(".d").click(function(){
alert($(this).text());//获取元素本身 dbclick 双击 focus获得焦点 blur 失去焦点 change 文本框发生改变
})
</script>