PHP Jquery

$(根据名字找到某个元素 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>