PHP Jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
#aa
{
    width:200px;
    height:200px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<div id="aa" style="">hello</div>
<div class="bb">22</div>
<div class="bb">33o</div>
<div class="bb">44</div>
<input type="text" name="cc"  bs="dd"/>

</body>
<script type="text/javascript">
//根据id找元素,找到具体的dom对象
var d=document.getElementById("aa");
var c=document.getElementsByClassName("bb");
var div=document.getElementsByTagName("div");
var input=document.getElementsByName("cc");

//操作内容
//1.非表单元素
d.innerHTML;d.innertext;
//2.表单元素
d.value;

//操作属性
d.setAttribute("bs","pp");//设置属性
d.getAttribute("bs");//获取属性
d.removeAttribute("bs");//移除属性

//操作样式
d.style.color="red";
d.style.backgroundColor="yellow";
alert(d.style,width);


//匿名函数,找出的jquery对象,如果要取dom对象,取索引0的元素
$(document).ready(function(e) {
   /*var jd=$("#aa"); //根据id找元素,alert(jd[0]);*/  
   /*var jc=$(".bb");//根据class找*/
   /*var di=$("div");//根据标签名找*/
     var ip=$("input[bs=dd]");//根据属性筛选
     for(var i=0;i<jc.length;i++)
     {
         jc.eq(i);
     }
     
     //操作内容
     //1.非表单元素
     jd.text();  jd.text("aa");
     jd.html();   jd.html("vv");
     //2.表单元素
     d.value;

//属性操作
jd.attr("bs","aa");//设置属性
jd.attr("bs");//获取属性
jd.removeattr("bs");//移除属性

//操作样式
jd.css("background-coler","green");
//alert(jd.css("width"));

/*//给一个元素加事件
$("#aa").click(function(){    
    alert("aa");
        })*/
        
/*//给多个元素加事件
$(".bb").click(function(){
    alert($(this).text());
    })
*/

/*//给多个元素设置相同样式
$(".bb").css("color","pink");
*/
 
});
</script>
</html>

 事例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>

<input type="checkbox" id="all" /> 全选<br />
<input class="t" type="checkbox" value="aa" /> aa
<input class="t" type="checkbox" value="bb" /> bb
<input class="t" type="checkbox" value="cc" /> cc
<input class="t" type="checkbox" value="dd" /> dd
<input class="t" type="checkbox" value="ee" /> ee

<input type="button" value="测试" id="btn" />
<input type="text" id="txt" />
<input type="button" value="设置选中" id="sel" />

</body>
<script type="text/javascript">

$(document).ready(function(e) {
    
    //全选
    $("#all").click(function(){
        
        var ck = $(".t");
        var xz = $(this)[0].checked;
        
        ck.prop("checked",xz);
        
        })
    
    //取选中项的值
    $("#btn").click(function(){
        
        var ck = $(".t");
        for(var i=0; i<ck.length;i++)
        {
            if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
            {
                alert(ck.eq(i).val());
            }
        }
        
        })
        
    //设置某项选中
    $("#sel").click(function(){
        
        var v = $("#txt").val();
        
        var ck = $(".t");
        ck.prop("checked",false);
        for(var i=0;i<ck.length;i++)
        {
            if(ck.eq(i).val()==v)
            {
                ck.eq(i).prop("checked",true);
            }
        }
        
        })
    
    
    
});

</script>
</html>
原文地址:https://www.cnblogs.com/yy01/p/5489816.html