$(根据名字找到某个元素 document代表当前页面).ready这句话相当于加上了一个ready事件，ready的意思是页面加载完成 (function(e)匿名函数{
});
$(document).ready(function(e){});
取元素
JS方式
1.根据ID,取到是DOM对象
var div=document.getElementById("one");
2.根据class,取到的是数组
var div=document.getElementsByClassName("a");
3.根据name,取到的是数组
var div=document.getElementsByName("uid");
4.根据标签名
var div=document.getElementsByTagName("div");
JQUERY方式
在数组中要取DOM对象使用索引的方式,如果取Jquery对象使用eq()
1.根据ID,取到是JQUERY对象,它的索引0是DOM对象
var div=$("#uid");
2.根据class,取到的是数组是JQUERY对象,它的索引0是DOM对象
var div=$(".a")
3.根据属性,取到的是数组
var div=$("[bs='aa']");
4.根据标签名
var div=$("div");
操作内容
JS方式
1.非表单元素
取值
alert(div.innerText);
赋值
div.innerText="你好";
2.表单元素
取值
div.value
赋值
div.value="你好";
JQUERY方式
1.非表单元素
取值
alert(div.text());
赋值
div.text("hello");
2.表单元素
取值
div.val();
赋值
div.val("hello");
操作属性
JS方式
设置、修改属性
div.setAttribute("属性名","属性值");
移除属性
div.removeAttribute("属性名");
获取属性
div.getAttribute("属性名");
JQUERY方式
设置、修改属性
div.attr("a","aa");
移除属性
div.removeattr("a");
获取属性
div.attr("a");
操作样式
JS方式
设置样式
div.style.backgroundColor="blue";
获取样式
alert(div.style.color);//只能获取内联样式
JQUERY方式
设置样式
div.css("background-color","green");
获取样式
alert(div.css("color"));
操作元素
var str="<div id='abc' style='100px;height:100px; background-color:blue'></div>"; div.append(str);//追加元素 $("#abc").remove();//移除
事件
click()点击时 dblclick()双击 focus()获得焦点时 blur()失去焦点时 change()选中值变化
mousedown()鼠标按下 mousemove()鼠标移动 mouseout()鼠标离开 mouseover()鼠标放上
$(".b").click(function(){
alert($(this).text());
})
bind可以绑定和取消绑定事件
//绑定事件 $(".b").bind("click",function(){ alert($(this).text()); }); //取消绑定 $("#btn").click(function(){ $(".b").unbind("click"); }); //添加绑定 $("#add").click(function(){ $(".b").bind("click",function(){ alert($(this).text()); }); });
<script src="../jquery-1.11.2.min.js"></script> <style type="text/css"> .a { color:#FFF; font-size:30px; background-color:#F60; } </style> </head> <body> <div class="a" id="one">one</div> <div class="b" bs="aa">two</div> <div class="b">three</div> <div class="b">four</div> <input type="text" name="uid" bs="aa" id="uid" onblur="Show()" /> <input type="button" value="取消绑定" id="btn"/> <input type="button" id="add" value="添加绑定" /> <?php /*$(根据名字找到某个元素 document代表当前页面).ready这句话相当于加上了一个ready事件，ready的意思是页面加载完成 (function(e)匿名函数{ });*/ ?> </body> <script type="text/livescript"> $(document).ready(function(e) { $(".b").bind("click",function(){ alert($(this).text()); }); $("#btn").click(function(){ $(".b").unbind("click"); }); $("#add").click(function(){ $(".b").bind("click",function(){ alert($(this).text()); }); }); }); </script>