jQuery

作者: 木子川页心 | 来源:发表于2018-11-16 19:06 被阅读33次

1、引入jQuery

1.从jQuery.com下载jquery库
2从CDN中载入jQuery

2、基本语法

基础语法：$(selector).action()

$定义jQuery
选择符(selector)“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

举个栗子

<body>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
    <p>我是一个p元素</p>
<script>
   $(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    })
   })
</script>
</body>

3.事件

1.常用事件方法

点击事件：单击、双击
获取焦点
鼠标的各种事件

2.绑定事件

   <body>
    <button id="clickMeBtn">btn</button>

<script>
   $(document).ready(function(){
      $("#clickMeBtn").bind("click",clickHandler)
   });
   function clickHandler(e){
    console.log("clickHandler");
   }
</script>
</body>

bind可以用on代替，bind的底层实现就是用on

3.解除绑定事件

<body>
    <button id="clickMeBtn">btn</button>

<script>
   $(document).ready(function(){
      $("#clickMeBtn").bind("click",clickHandler)
      $("#clickMeBtn").unbind("click",clickHandler)
   });
   function clickHandler(e){
    console.log("clickHandler");
   }
</script>
</body>

unbind可以用off代替

4.事件的目标

5.事件的冒泡

6.自定义事件

<button id="clickMeBtn">点我</button>

<script>
   $(document).ready(function(){
        $("#clickMeBtn").click(function(){
            var e= jQuery.Event("myEvent");
            $("#clickMeBtn").trigger(e);

        });
        $("#clickMeBtn").bind("myEvent",function(event){
            console.log(event);
        })

   })
</script>
</body>

4.jQuery的HTML操作

1.jQuery捕获

<body>
    <p id="text">this is a p<a>这是一个a标签</a></p>
    <button id="#btn">btn</button>

<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            alert("text"+$("#text").text());
        })
   })
</script>
</body>

<body>
    <p id="text">this is a p<a>这是一个a标签</a></p>
    <button id="#btn">btn</button>

<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            alert("text"+$("#text").html());
        })
   })
</script>
</body>

html可以获取内部的子标签，text只能获取具体的内容

获取input的value值
<body>
    <p id="text">this is a p<a>这是一个a标签</a></p>
    <button id="#btn">btn</button>
     <input type="text" id="inp" value="大家好">
<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            alert("text"+$("#inp").val());
        })
   })
</script>
</body>

获取属性

<body>
    <p ><a href="http://www.baidu.com" id="aid"></a></p>
    <button id="#btn">btn</button>
<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            alert("text"+$("#aid").attr("href"));
        })
   })
</script>
</body>

2.jQuery设置

<body>
    <p id="p1">hello world</p>
    <button id="btn">点我1</button>
    <p id="p2">hello world</p>
    <button id="btn2">点我2</button>
<script>
   $(document).ready(function(){
        $("#btn2").click(function(){
            $("#p1").text("点我你就变了哈哈哈哈")
        });
        $("#btn2").click(function(){}
            $("#p1").html("<a>猜我变成什么样</a>")
        });
   })
</script>
</body>

3.jQuery添加元素

 function appendText(){
    html/jquery/Dom
    var text1 = '<p>iwen</p>';
    var text2 = $("<p></p>").text("ime");
    var text3 = document.creteElement("p");
    text3.innerHtml = "acely";
    $("body").append(text1,text2,text3);
   }

append在被选中元素的结尾插入内容
prepend在被选中元素的开头插入内容
before在被选中元素的之前插入内容
after在被选入元素之后插入内容

<body>
    <p id="p1">hello world</p>
    <button id="btn">btn</button>
    
<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            $("#p1").append("这是我用append添加的内容");
        })
        $("#btn").click(function(){
            $("#p1").prepend("这是我用prepend添加的内容");
        })
        $("#btn").click(function(){
            $("#p1").before("这是我用before添加的内容");
        })
        $("#btn").click(function(){
            $("#p1").after("这是我用after添加的内容");
        })
   })

4.jQuery删除元素

remove全部删除
empty删除里面的子元素

<body>
    <div id="div" style="width: 200px;height: 200px;border: 1px solid black;background-color: #ededed">
        hello
        <p >hello world</p>
        <p>hello</p>
     </div>
    <button id="btn">删除</button>
<script>
   $(document).ready(function(){
    $("#btn").click(function(){
        $("#div").remove();
    });
   });
</script>

<body>
    <div id="div" style="width: 200px;height: 200px;border: 1px solid black;background-color: #ededed">
        hello
        <p >hello world</p>
        <p>hello</p>
     </div>
    <button id="btn">删除</button>
<script>
   $(document).ready(function(){
    $("#btn").click(function(){
        $("#div").empty();
    });
   });
</script>
</body>

5.jQuery的效果

1.淡入淡出

fadeIn()淡入

<body>
    <button id="in">fadein</button>
    <div id="div1" style="width: 80px;height: 80px;background-color: aqua;display: none;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: red;display: none;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: green;display: none;"></div>

<script>
   $(document).ready(function(){
        $("#in").on("click",function(){
            $("#div1").fadeIn(1000);
            $("#div2").fadeIn(1000);
            $("#div3").fadeIn(1000);
        })
   })
</script>
</body>

fadeOut()淡出

<body>
   <button id="out">fadeout</button>
   <div id="div1" style="width: 80px;height: 80px;background-color: aqua;"></div>
   <div id="div2" style="width: 80px;height: 80px;background-color: red;"></div>
   <div id="div3" style="width: 80px;height: 80px;background-color: green;"></div>

<script>
  $(document).ready(function(){
       $("#out").on("click",function(){
           $("#div1").fadeOut(1000);
           $("#div2").fadeOut(1000);
           $("#div3").fadeOut(1000);
       })
  })
</script>
</body>

fadeTo()淡出的时候设置透明度

<body>
    <button id="in">fadein</button>
    <button id="out">fadeout</button>
    <button id="toggle">toggle</button>
    <button id="to">to</button>
    <div id="div1" style="width: 80px;height: 80px;background-color: aqua;display: none;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: red;display: none;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: green;display: none;"></div>

<script>
   $(document).ready(function(){
        $("#in").on("click",function(){
            $("#div1").fadeIn(1000);
            $("#div2").fadeIn(1000);
            $("#div3").fadeIn(1000);
        });
        $("#out").on("click",function(){
            $("#div1").fadeOut(1000);
            $("#div2").fadeOut(1000);
            $("#div3").fadeOut(1000);
        });
        $("#toggle").on("click",function(){
            $("#div1").fadeToggle(1000);
            $("#div2").fadeToggle(1000);
            $("#div3").fadeToggle(1000);
        });
        $("#to").on("click",function(){
            $("#div1").fadeTo(1000,0.5);
            $("#div2").fadeTo(1000,0.7);
            $("#div3").fadeTo(1000,0.3);
        })
   })
</script>
</body>

效果对比图

图片.png

fadeToggle()相当于开关，既可淡入也可淡出

2.滑动

slideDown()滑出
slideToggle()既可以滑出也可以隐藏
slideUp()隐藏

<style>
    #content,#flipshow,#fliphide,#fliptoggle{
        padding:5px;
        text-align: center;
        background-color: #ece023;
        border: solid 1px #ece099;
    }
   #content{
    padding:50px;
    display: none;
   }  
    </style>

</head>
<body>
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="fliptoggle">同时操作</div>
    <div id="content">hello world</div>

<script>
   $(document).ready(function(){
     $("#flipshow").click(function(){
        $("#content").slideDown(1000);
     });
     $("#fliphide").click(function(){
        $("#content").slideUp(1000);
     });
     $("#fliptoggle").click(function(){
        $("#content").slideToggle(1000);
     });
   })
</script>
</body>

3.回调

<body>
    <button>隐藏</button>
    <p>hello world hello world hello world hello world</p>

<script>
   $(document).ready(function(){
        $("button").click(function(){
            $("p").hide(1000,function(){
                alert("动画结束，这个方法被回调")
            })
            
        })
   })
</script>

4.隐藏与显示

toggle既可以控制显示也可以控制隐藏

<body>
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">可控制</button>
<script>
   $(document).ready(function(){
        $("#hide").click(function(){
                $("p").hide(1000);

        });
        $("#show").click(function(){
                $("p").show(1000);

        });
        $("#toggle").click(function(){
                $("p").toggle(1000);

        })
   })
</script>
</body>

6.jQuery的扩展

1.扩展

2.no Conflict

消除掉$对于jQuery的缩写
对于jQuery比较难拼写，可声明一个对象代替

<body>
    <div>hello</div>
    <button id="btn">btn</button>
<script>
   var myjq = $.noConflict();
   myjq(document).ready(function(){
        myjq("#btn").on("click",function(){
            myjq("div").text("new hello");
        })
   })
</script>
</body>

7.CSS操作与盒子模型

1.css操作

<body>
    <div></div>

<script>
   $(document).ready(function(){
    $("div").css("width","100px");
    $("div").css("height","100px");
    $("div").css("background","red");
   })
</script>
</body>

另一种方式

<body>
    <div></div>

<script>
   $(document).ready(function(){
      $("div").css({
       width:"100px",
       height:"100px",
       background:"red"
      })
   })
</script>
</body>

可以通过addClass("类名")来设置css样式
removeClass("类名")移出掉之前的style样式

2.盒子模型

height() width()元素本身的高度，不包括margin boder padding
innerheight() innerwidth()包括元素本身加margin padding
outerHeight(true)整个盒子的全部高度
outerHeight()元素本身，内边距padding，边框boder

8.元素

1.元素的遍历

向上遍历：子级找到父级一直向上
parent()最近的一个父元素
parents()是指所有的父元素
parentUntil()指的是由p元素到div1这个区间

  $("p").parentUntil("#div1").css({border:"3px solid red"})

向下遍历
children()可选参数只向下遍历一级针对它的儿子辈
find()必选参数，可以针对它的所有子元素

<style>
        #div1{
            width: 500px;
            height: 200px;
            border: 3px solid chocolate;
        }
        #div2{
            width: 400px;
            height: 150px;
            margin-top: 10px;
            margin-left: 10px;
            border: 3px solid chocolate;
        }
        p{
            margin-top: 10px;
            margin-left: 10px;
            width: 150px;
            height: 80px;
            border: 3px solid chocolate;
        }
    </style>
</head>
<body>
    <div id="div1">div1
        <div id="div2">div2
            <p>
                <a>
                    hello
                </a>
            </p>
        </div>
    </div>

<script>
   $(document).ready(function(){
       $("#div1").children("#div2").css({border:"3px solid red"})
        $("#div1").find("a").css({border:"3px solid red"})
   })
</script>
</body>

同级遍历
sibings()除了h4其他同级的元素都被修改掉

$(document).ready(function(){
        $("h4").siblings().css({
            border:"3px solid red"
        })
   })

next()h4的下一个元素被修改

 $(document).ready(function(){
        $("h4").next().css({
            border:"3px solid red"
        })
   })

nextAll()下面所有的元素都被修改
nextUntil()h4到h6的区间（向下）

 $(document).ready(function(){
        $("h4").nextUntil("h6").css({
            border:"3px solid red"
        })
   })

prev()上一个元素被修改
prevAll()向上的所有元素被修改
prevUntil()区间

2.元素的过滤

first()寻找同样元素的第一个
last()最后一个
eq(id)返回当前元素的索引id
filter(“标准”)满足这个集合的所有元素
net(“标准”)不满足这个集合的所有元素