jquery

1 下载jquery的安装包，添加到你要用的文件夹中

script引用jqurey
 <!-- 
        html-css   bootstrap
        javaScript  jquery
        jqery  是一个javaScript
     -->
 <div id="app">div</div>
     <script>
        //  var app = document.getElementById("app");
        //  app.onclick = function(){
            //  this.innerHTML = "change"
        // }
        var app = $("#app");
        console.log(app)

<!-- jquery支持所有的css选择器 -->
<ul class="parent">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
        var lis = $(".parent li")
        console.log(lis)
        或者使用id的选择器方法

事件

 <div id="app">徐佳佳</div>
    <script>
        $("#app").click(function(){
        $(this).html("高云锋")
        })

参数事件

 <input type="text" id="app" value="吴樟大傻逼">
    <script>
        $("#app").focus(function(){
            $(this).css({backgroundColor:"red",width:"100px"})
        }).blur(function(){
            $(this).css({backgroundColor:"pink"})
        })
        // $("#app").blur(function(){
        //     $(this).css({backgroundColor:"yellow",width:"100px"})
        // })

效果

 <div>hellow word</div>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            $("div").hide(12)
        })
    </script>

效果切换

<div>hellow word</div>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            var isShow = $("div").is(":visible");
            console.log(isShow)
            if(isShow){
                $("div").hide(1000)
            }else{
                    $("div").show(1000)
                }
        })

js.html

 <div id="div" style="display: block;">hellow word</div>
    <button id="btn">按钮</button>
    <script>
        var div = document.getElementById("div");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            if(div.style.display=="block"){
                div.style.display = "none"
            }else{
                div.style.display = "block"
            }
        }

toggle事件

 <div>hellow word</div>
    <button id="btn">按钮</button>
    <script>
        $("#btn").click(function(){
            // toggle   融合hide和show方法
            $("div").toggle(1000)
        })