JQuery——相关练习

####JQuery的基本语法

<!--导入JQuery文件-->
<script src="js/jquery-3.1.1.min.js">
    /*带min的是压缩后的JQuery*/
</script>

<!--JQuery文档就绪函数
文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery
$(document).ready(function(){ ---jQuery functions go here --- })
-->

<script type="text/javascript">
    // hide隐藏元素
    // show显示元素
    $(document).ready(function(){
        $('p').hide();
    });

    //文档就绪函数 ：简化
    $(function(){
        $('p').hide();
    })

</script>

<body>
<p>这是p标签的第一段内容</p>
<h2>这是p标签的第二段内容</h2>
<!--<script type="text/javascript">
    // hide隐藏元素
    // show显示元素
    $('p').hide();
</script>-->
</body>

####DOM节点操作 创建和删除

<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //添加节点
        var table = $("<table><tr>tr内容</tr></table>");
        $("div").append(table);
    })

    //删除节点
    $(function(){
    var table = $("<table id='t'><tr>tr内容</tr></table>");
    $("div").append(table);
    table.remove();
    //克隆
    table.clone().appendTo("div");
    })
</script>

<body>
<div></div>
</body>

####CSS操作 循环转播

<!--引入jquery-->
<style type="text/css">
    div{
        height: 300px;
        width: 300px;
        background-color: orange;
    }
    .a{
        background-color: blue;
    }
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $("#d").mouseover(function(){
            $(this).toggleClass('a');
            //$(this).addClass('a');
        }).mouseout(function(){
            $(this).toggleClass('a');
            //$(this).removeClass('a');
        });
    })
</script>

<body>
<div id="d">
    sdkfjs
</div>
</body>

####CSS操作

<!--引入jquery-->
<style type="text/css">
   div{
      height: 300px;
      width: 300px;
      background-color: orange;
   }
   .a{
      background-color: blue;
   }
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
   $(function(){
      $("#d").mouseover(function(){
         $(this).addClass('a');
      }).mouseout(function(){
         $(this).removeClass('a');
      });
   })
</script>

<body>
   <div id="d">
      sdkfjs
   </div>
</body>

####通过jQuery修改CSS样式

    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
       $(function(){
           //一个属性
/*           $("div").css('background-color','red');*/

           //多个属性
           $("div").css({'background-color':'red','height':'100px',"width":"50px"});
       })
    </script>

<div>
    div中的内容
</div>

####操作元素属性

    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取input的name属性值
/*            alert($('input').attr('name'));*/

            //修改input的name属性值
/*            $("input").attr('name','name被修改的属性值');
            $("input").attr('type','password');
            $("input").attr('id','text');*/

            //一次性修改以上三个内容
            //修改元素的所有属性值
            $("input").attr({'name':'name值','type':'password','id':'id值'})
            //多个属性值一起修改，调用attr方法，把所有要修改的属性放在{ }中，属性之间用 , 分隔
            //属性名与属性值之间用 : 隔开
        })
    </script>

<body>
<input type="text" name="ipt" value=""/>
</body>

####解决多库冲突

<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
   $(function(){
      //放弃$符号
      jQuery.noConflict();
      jQuery("#a").html('sddsdsdfsdfs')

   })
</script>

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

####JS对象与JQuery对象相互转换

    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //原生的JS对象与JQuery对象不是一个概念，二者不可互相调用
            var d = document.getElementById('d');

/*            //JS的方式添加内容
            d.innerText = '添加的内容';*/

            //原生DOM（JS对象）转换为JQuery对象：$(原生对象)
            $(d).html('将d放在$符号当中转换');

            //JQuery方式
            var d = $('#d');
            //JQuery的方法调用ID为d的对象
            d.html('JQuery添加的内容');

            var e = $("#e");
            //这个不能实现
            // e.innerText('JQuery对象不能直接调用JS的原生方法');
            //JQuery对象转原生对象：$(...)[0]  转原生对象用下标，只能用下标为0转换。
            e[0].innerText('JQuery对象不能直接调用JS的原生方法');
            //方法二： $(...).get(0)
            e.get(0).innerText('通过get方法添加的内容');

        })
    </script>

<body>
<div id="d"></div>
<div id="e"></div>
</body>