jQuery

1jq如何使用: $("选择器").动作()
console.log($("#myDiv")); //jq
console.log(document.getElementById("myDiv")); //js
2.js原生对象和jq对象的相互转化
//jq对象-->js原生对象
    var jqObj = $("#myDiv");
    var jsObj = jqObj[0];
    console.log(jsObj);
    
    //js原生对象-->jq对象
    var jsObj2 = document.getElementById("myDiv");
    var jqObj2 = $(jsObj2);
    console.log(jqObj2);
3.测试一个对象是js原生对象还是jq对象，只需使用一下属性即可
 
 

对着api测试↓↓↓↓↓↓

<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
    <p id="p1">111</p>
    <p id="p2">222</p>
    <p id="p3">333</p>
</div>

<script type="text/javascript">
    //1.jq如何使用
    //$("选择器").动作()
    //console.log($("#myDiv"));
    //console.log(document.getElementById("myDiv"));
    
    /* 
    js操作
    var arr = document.getElementsByTagName("p");
    for(var i = 0; i<arr.length;i++){
        arr[i].innerHTML = "aaa";
    } */
    
    /*
    jq操作
    var arr = $("#myDiv").children();
    for(var i = 0; i<arr.length;i++){
        arr[i].innerHTML = "aaa";
    } */
    
    //2.js原生对象和jq对象的相互转化
    //jq对象-->js原生对象
    var jqObj = $("#myDiv");
    var jsObj = jqObj[0];
    console.log(jsObj);
    
    //js原生对象-->jq对象
    var jsObj2 = document.getElementById("myDiv");
    var jqObj2 = $(jsObj2);
    console.log(jqObj2);
    
    //3.测试一个对象是js原生对象还是jq对象，只需使用一下属性即可
    
    
</script>

 

<script src="js/jquery.min.js"></script>
<script type="text/javascript">

    function testId(){
        $("#myDiv").html("aaa");
    }
    
    function testClass(){
        $(".myClass").html("aaa")
    }
    
    function testHouDai(){
        $("form input").val("aaaaaaa");
    }
    
    function testHouDai2(){
        $("form > input").val("aaaaaaa");
    }
    
    function testNextSibling(){
        $("form + input").val("aaaaaaa");
    }
    
    function testNextSiblings(){
        $("form ~ input").val("aaaaaaa");
    }
    
    function testChoose(){
        //$("ul li:first").html("aaaaaaa");
        //$("ul li:last").html("aaaaaaa");
        //$("ul li:even").html("aaaaaaa");
        //$("ul li:odd").html("aaaaaaa");
        //$("ul li:eq(2)").html("aaaaaaa");
        //$("ul li:gt(2)").html("aaaaaaa");
        //$("ul li:lt(2)").html("aaaaaaa");
    }
    
    function testChoose2(){
        $(":header").css("background", "#EEE");
    }
    
    function testChoose3(){
        //$("input[id]").val("aaaaaaaaa");
        //$("input[id=id1]").val("aaaaaaaaa");
        //$("input[id!=id1]").val("aaaaaaaaa");
        //$("input[name^=news]").val("aaaaaaaaa");
        //$("input[name$=ter]").val("aaaaaaaaa");
        //$("input[name*=ce]").val("aaaaaaaaa");
        $("input[id][name]").val("aaaaaaaaa");
    }
    
    function testSplitColor(){
        $("tr:odd").css("background", "#EEE");
        $("tr:even").css("background", "grey");
    }
    

</script>
</head>
<body>
<button onclick="testId()">testId</button>
<button onclick="testClass()">testClass</button>
<button onclick="testHouDai()">testHouDai</button>
<button onclick="testHouDai2()">testHouDai2</button>
<button onclick="testNextSibling()">testNextSibling</button>
<button onclick="testNextSiblings()">testNextSiblings</button>
<button onclick="testChoose()">testChoose</button>
<button onclick="testChoose2()">testChoose2</button>
<button onclick="testChoose3()">testChoose3</button>
<button onclick="testSplitColor()">testSplitColor</button>
<hr>

<table border="1" style="border-collapse: collapse;">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
    <tr><td>10</td><td>11</td><td>12</td></tr>
    <tr><td>13</td><td>14</td><td>15</td></tr>
    <tr><td>16</td><td>17</td><td>18</td></tr>
    <tr><td>19</td><td>20</td><td>21</td></tr>
</table>

<!-- 
choose3()
<input id="id1" type="text" name="newsletter" value="Hot Fuzz" />
<input id="id2" type="text" name="neslcetater" value="Cold Fusion" />
<input type="text" name="accept" value="Evil Plans" /> -->

<!-- 
choose2()

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p> -->

<!-- 
choose()

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul> -->


<!-- 
testId()

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div> -->

<!-- 
testClass()

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span> -->

<!-- 
testHouDai()
testHouDai2()
testNextSibling()
testNextSiblings()

<input name="none3" />
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
<input name="none2" /> -->
</body>
<style type="text/css">
    .clored {
        color: red;
        font-size: 72px;
    }
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    function testVal(){
        /* console.log($("#id1").val())
        console.log(document.getElementById("id1").value) */
        
        /* $("#id1").val("bbbaaa"); */
        
        /* $("#id1").val(function(){
            return "aaa";
        }) */
        
    }
    
    function testText_Html(){
        // text() --> innerText
        // html() --> innerHTML
        
        /* console.log($("#div1").text());
        console.log($("#div1").html()); */
        
        //$("#div1").text("<img src='1.jpg'>");
        //$("#div1").html("<img src='1.jpg'>");
        
        /*$("#div1").html(function(){
            return "<img src='1.jpg'>";
        }) */
    }
    
    function testAddClass(){
        $("#div1").addClass("clored");
    }
    
    function testRemoveClass(){
        $("#div2").removeClass("clored");
    }
    
    function testToggleClass(){
        $("#div1").toggleClass("clored");
    }
    
    function testAttr_Prop(){
        //attr() --> setAttribute()/getAttribute()/removeAttribute()
        //prop() -->  “.”
        console.log($("#ipt").attr("abcd"));
        console.log($("#ipt").prop("abcd"));
        
        console.log($("#ipt").attr("value"));
        console.log($("#ipt").prop("value"));
    }
</script>
</head>
<body>
    <button onclick="testVal()">testVal</button>
    <button onclick="testText_Html()">testText_Html</button>
    <button onclick="testAddClass()">testAddClass</button>
    <button onclick="testRemoveClass()">testRemoveClass</button>
    <button onclick="testToggleClass()">testToggleClass</button>
    <button onclick="testAttr_Prop()">testAttr_Prop</button>
    <input id="id1" type="text" >
    
    <div id="div1">aaaa</div>
    
    <div id="div2" class="clored">bbbb</div>
    
    <input id="ipt" type="text" abcd="1234" value="admin"/>
    
</body>

 

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    function testVal() {
        //$("li").eq("3").html("aaaaaaa");
        //$("li").first().html("aaaaaaa");
        //$("li").last().html("aaaaaaa");
    }

    function testHasClass() {
        console.log($("#myDiv").hasClass("c1"))
    }

    function testChildren() {
        //如果遍历数组，获取数组中的元素，返回的是一个js对象
        console.log($("ul").children().length)
        var cs = $("ul").children();
        for (var i = 0; i < cs.length; i++) {
            console.log(cs[i].innerText);
        }
    }

    function testNext() {
        $("p").next().text("ababababa");
    }

    function testNextAll() {
        $("div[id=id1]").nextAll().text("ababababa");
    }
    
    function testParent(){
        console.log($("p").parent());
    }
</script>
</head>
<body>
    <button onclick="testVal()">testVal</button>
    <button onclick="testHasClass()">testHasClass</button>
    <button onclick="testChildren()">testChildren</button>
    <button onclick="testNext()">testNext</button>
    <button onclick="testNextAll()">testNextAll</button>
    <button onclick="testParent()">testParent</button>
    <hr>
    <!--<ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
        <li>l4</li>
        <li>l5</li>
        <li>l6</li>
    </ul>
    
    <div id="myDiv" class="c1"></div>
    
    <p>Hello</p>
    <p>Hello Again</p>
    <div><span>And Again</span></div> 
    
    <div></div>
    <div id="id1"></div>
    <div></div>
    <div></div>
    <div></div>
    -->

    <div>
        <p>Hello</p>
        <p>Hello</p>
    </div>

</body>
<style type="text/css">
    #div1{
        border: red 2px solid;
        width: 200px;
        height: 50px;
    }
    
    #div2{
        border: blue 2px dashed;
        width: 150px;
        height: 50px;
    }
    
    #div3{
        border: red 2px solid;
        width: 200px;
        height: 50px;
    }

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    function testAppend(){
        //在#div2的内部 后面追加元素
        $("#div2").append("<i>world</i>");
    }
    
    function testAppendTo(){
        $("<i>world</i>").appendTo("#div2");
    }
    
    function testPrepend(){
        //在#div2的内部 前面追加元素
        $("#div2").prepend("<i>world</i>");
    }
    function testPrependTo(){
        $("<i>world</i>").prependTo("#div2");
    }
    
    function testAfter(){
        //在#div2的外部 后面追加元素
        $("#div2").after("<div><i>world</i><div>");
    }
    
    function testInsertAfter(){
        $("<div><i>world</i><div>").insertAfter("#div2");
    }
    
    function testBefore(){
        //在#div2的外部 前面追加元素
        $("#div2").before("<div><i>world</i><div>");
    }
    
    function testInsertBefore(){
        $("<div><i>world</i><div>").insertBefore("#div2");
    }
    
    function testWrap(){
        $("p").wrap("<div class='wrap'></div>")
    }
    
    function testWrapAll(){
        $(".aaa").wrapAll("<div class='wrap'></div>")
    }
    
    function testReplaceWith(){
        $("p").replaceWith("<b>Paragraph. </b>");
    }
    
    function testReplaceAll(){
        $("<b>Paragraph. </b>").replaceAll("p");
    }
    
    function testUnWrap(){
        $(".aaa:first").unwrap()
    }
    
    function testEmpty(){
        $("#clear").empty();
    }
    
    function testRemove(){
        $("#clear").remove();
    }
    
</script>
</head>
<body>

<button onclick="testAppend()">testAppend</button>
<button onclick="testAppendTo()">testAppendTo</button>
<button onclick="testPrepend()">testPrepend</button>
<button onclick="testPrependTo()">testPrependTo</button>
<button onclick="testAfter()">testAfter</button>
<button onclick="testInsertAfter()">testInsertAfter</button>
<button onclick="testBefore()">testBefore</button>
<button onclick="testInsertBefore()">testInsertBefore</button>
<button onclick="testWrap()">testWrap</button>
<button onclick="testWrapAll()">testWrapAll</button>
<button onclick="testReplaceWith()">testReplaceWith</button>
<button onclick="testReplaceAll()">testReplaceAll</button>
<button onclick="testUnWrap()">testUnWrap</button>
<button onclick="testEmpty()">testEmpty</button>
<button onclick="testRemove()">testRemove</button>
<hr>
    <div id="div1"></div>
    <div id="div2">
        <b>hello</b>
    </div>
    
    <div id="div3"></div>

    <div>
    <p class="aaa">Paragraph 1</p>
    </div>
    <p class="aaa">Paragraph 2</p>
    <p class="aaa">Paragraph 3</p>
    
    <div id="clear">
        <b>hello</b>
    </div>


</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

    /*window.onload = function(){
        console.log("就绪...")
    }*/
    
    $(document).ready(function(){
        console.log("就绪...")
    })
    
    //页面载入就绪时，执行一个方法
    $(function(){
        console.log("就绪2...")
    })
    $(function(){
        console.log("就绪3...")
    })
        
    
    function testBind(){
        $("#eveid").bind("focus", function(){
            console.log("获取焦点")            
        })
        $("#eveid").bind("focus", function(){
            console.log("获取焦点,haha")            
        })
        
        $("#eveid").bind("blur",function(){
            console.log("丢失焦点！");
        })
        
    }
    
    function testUnBind(){
        $("#eveid").unbind("focus");
    }
    
    //一次性事件
    function testOne(){
        $("#eveid").one("focus",function(){
            console.log("hello!");
        });
    }
    
    function testClick(){
        $("#btnid").click(function(){
            console.log("我被点击了！！！")
        });
        
        $("#btnid").bind("click",function(){
            console.log("我被点击了！！！")
        });
    }

</script>
</head>
<body>
<button onclick="testBind();">testBind</button>
<button onclick="testUnBind();">testUnBind</button>
<button onclick="testOne();">testOne</button>
<button onclick="testClick();">testClick</button>
<input id="eveid" type="text">

<button id="btnid">普通按钮</button>

</body>
<style type="text/css">
#myDiv {
    border: 1px red solid;
    width: 300px;
    height: 100px;
}
.block{
    border: 2px red solid;
    width: 30px;
    height: 10px;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    function testCss() {
        console.log($("#myDiv").css("color"));

        $("#myDiv").css("color", "white");
        $("#myDiv").css("background-color", "blue");

        $("#myDiv").css({
            color : "red",
            background : "blue"
        });

    }

    function testToggle() {
        $("#myDiv").fadeToggle(1000);
    }

    function testAnimate() {
        $("p").animate({
            left : "+=50px",
            opacity : 'show'
        }, 5000);
    }
    
    $(function(){
        $("#right").click(function(){
          $(".block").animate({left: '+50px'}, "slow");
        });

        $("#left").click(function(){
          $(".block").animate({left: '-50px'}, "slow");
        });
    })
    
    $(function(){
        $( "#clickme" ).click(function() {
          $( "#book" ).animate({
            opacity: 0.25,
            left: "+=50",
            height: "toggle"
          }, 5000, function() {
            // 动画完成。
          });
        });
    })
        
</script>
</head>
<body>
    <button onclick="testCss();">testCss</button>
    <button onclick="testToggle();">testToggle</button>
    <button onclick="testAnimate();">testAnimate</button>
    <div id="myDiv">样式变化</div>
    
    <p>test_test</p>
    
    <button id="left">«</button> <button id="right">»</button>
        <div class="block">hello</div>
        
<div id="clickme">
  Click here
</div>
<img id="book" src="1.jpg" alt="" width="100" height="123"
  style="position: relative; left: 10px;">
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

    //async:是否异步请求
    //data:发送到服务器的数据
    //dataType:预期服务器返回数据的类型
    function testAjax() {
        $.ajax({
            url:"hiservlet",
            type:"get",
            async:true,
            data:{aaa:"bbb",ccc:"ddd",fav:"1",fav:"2"}, //"aaa=bbb&ccc=ddd"
            dataType:"json",
            success:function(data){
                console.log(data.aaa);
            }
        })
        
        $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
    }
</script>
</head>
<body>
<button onclick="testAjax();">点击发送ajax请求</button>
<div id="myDiv"></div>


<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
</body>
<style type="text/css">
    #myDiv{
        border: 2px red solid;
        width: 300px;
        height: 200px;
    }

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            type:"get",
            async:true,
            url:"hiservlet",
            success:function(data){
                //document.getElementById("myDiv").innerHTML = data;
                $("#myDiv").html(data);
                
            }
        })
    }
    
    function showDiv(){
        $("#myDiv").show(5000);
    }
    
    function hideDiv(){
        $("#myDiv").hide(3000);
    }
    
</script>
</head>
<body>

<button onclick="showDiv();">显示DIV</button>
<button onclick="hideDiv();">隐藏DIV</button>
<button onclick="doAjax();">点我发送ajax请求</button>

<div id="myDiv"></div>
</body>

 

 
 
 
 
 
 
posted @ 2019-05-17 17:01  ___mouM  阅读(120)  评论(0)    收藏  举报