js,jquery基础使用方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #aa{ width:100px; height:100px;}
    </style>
</head>
<body>
<div id="aa" style="color: #9A0000"><span>aaaaaa</span></div>
<div class="a1">div1</div>
<div class="a1">div2</div>
<span class="a1">span1</span>
<input type="text" name="uid" id="bd" value="aa">
<input type="checkbox" id="ck">全选
<br><br>
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
</body>
<script type="text/javascript">
    //js.jquery找元素
    //js找元素
//    var a = document.getElementById("aa");//找id
    //alert(a);
//    var a = document.getElementsByClassName("a1");//找class.
//    alert(a[2]);
    //var a = document.getElementsByName("uid");//找name.
    //alert(a[0]);
    //var a = document.getElementsByTagName("div");//找div标签.
    //alert(a[0]);
    //jquery找元素
//    var a = $("#aa");//找id
    //lert(a);
//    var a = $(".a1");//找class.
    //alert(a.eq(2));//要想取某一个class用eq()方法.
    //var a = $("div");//找div标签.
    //alert(a[0]);
    //var a = $("[name=uid]");//根据属性筛选
    //alert(a);
    //js.jQuery操作内容
    //js操作内容
    //非表单元素
    //alert(a.innerText);//文本
    //alert(a.innerHTML);//HTML代码
    //表单元素
    //alert(a.value);//获取表单值
    //a.value="hello world";//改变里面的值
    //Jquery操作内容
    //非表单元素
    //alert(a.text());//获取文本
    //a.text("bbbbbb");//改变值
    //alert(a.html());//HTML代码
    //表单元素
    //alert(a.val());//获取表单值
    //a.val("bb");//修改表单里的值
    //js.jquery操作属性
    //js操作属性
    //a.setAttribute("test","test");//添加属性
    //a.removeAttribute("type");//删除属性
    //alert(a.getAttribute("value"));//输出值
    //jquery操作属性
    //a.attr("text","text");//添加属性
    //a.removeAttr("text");//删除属性
    //alert(a.attr("value"));//输出值
    //a.prop("text","text");//添加属性（这个方法不显示，但功能正常使用。）
    //a.removeProp(a.prop("text"));//删除属性
    //alert(a.prop("text"));//输出值
    //js.jquery操作样式
    //js操作样式
    //a.style.fontSize = "30px";//通过style修改字体大小
    //alert(a.style.color);//输出查看字体颜色
    //jquery操作样式
    //a.css("background-color","green");//背景颜色改为绿色
    //alert(a.css("width"));输出查看宽度
    //js.jquery统一操作样式
    //js统一操作样式
//    var d = document.getElementsByClassName("a1");
//    for(var i = 0;i<d.length;i++)
//    {
//        d[i].style.fontSize = "30px";
//    }
    //jquery统一操作
    //$(".a1").css("font-size","30px");//统一修改字体大小
//    //点击事件
//    $("#ck").click(function(){
//        alert($(this));
//        $(".ck").prop("checked",$(this).prop("checked"));
//    })//全选
</script>
</html>

 

posted @ 2017-03-09 16:12  君陌丶  阅读(250)  评论(0)    收藏  举报