8.7.1、jQuery遍历

return false 阻止a标签的跳转
load()加载服务器上的数据

  1. <div class="hand">
  2.          <a href="html/html.html">html</a>
  3.          <a href="html/css.html">html</a>
  4.     </div>
  5.     <div id="app">
  7.     </div>
  8.     <div class="footer">
  9.        footer
  10.     </div>
  11.     <script>
  12.         var htmls = ["html/html.html","html/css.html"];
  13.         $("app").load(htmls[0])
  14.         $(".head a").click(function(){
  15.             $("#app").load(htmls[$(this).index()])
  16.             return false;
  17.         })
  18.     </script>

8.7.2、val

$(element).val() —获取value值
$(element).val(value) —改变value值

  1.    <input type="text" value="你">
  2.     <script>
  3.        var value = $("input").val("")
  4.        console.log(value)
  5.     </script>

8.7.3、jquery-js/ js-jquery

jquery对象转为js之后，才能使用原生的方法
jquery-js

  1. <div>
  2.     div
  3. </div>
  4.     <script>
  5.         var div = $("div")[0];
  6.         var content = div.innerHTML;
  7.         console.log(content);
  8.     </script>

js-jquery

html();
innerHTML
原生的JS对象转换为jQuery对象 $(element)

  1. <div>
  2.      div
  3. </div>
  4.     <script>
  5.         var div = document.getElementsByTagName("div")[0];
  6.         console.log($(div).html());
  7.     </script>

8.7.4、jquery方法

  1. <ul>
  2.         <li>html</li>
  3.         <li>css</li>
  4.         <li>javascript</li>
  5.     </ul>
  6.     <script>
  7.         var arr = $("li").filter(item=>{
  8.             console.log(item)
  9.         })
  10.     </script>

8.7.5、find 获取父元素下的子元素

  1. <div id="app">
  2.         <div class="item">hello world</div>
  3.         <div>div</div>
  4.     </div>
  5.     <script>
  6.         var item = $("#app").find(".item");
  7.         var i = $("#app div").filter(".item");
  8.         console.log(item)
  9.         console.log(i)
  10.     </script>

获得父元素

children()
siblings()
parent()
获取所有的兄弟元素

  1.  $("li").click(function(){
  2.             $(this).css({color:"red"}).siblings().css({color:"green"})
  3.         })
  4.         console.log($("li").parent())  //获取父元素

8.7.6、判断滚动条是否达到底部

  1. <script>
  3.         $(window).scroll(function () {
  4.             console.log(isReachBottom())
  5.             if(isReachBottom()){
  6.                 /*发送http请求 */
  7.             }
  8.         })
  9.         function isReachBottom() {
  10.             var scrollTop = $(window).scrollTop(); //获取滚动条距离顶部的高
  11.             var availHeight = $(window).height(); //获取可视区域的高
  12.             var dw = $(document).height();  //获取内容区域的高
  13.             return (scrollTop + availHeight) > dw -200 ? true : false;
  14.         }
  15.     </script>

8.7.7、点击标签滚动至内容区域(例子)

  1. *{
  2.             padding: 0;
  3.             margin: 0;
  4.         }
  5.         .body{
  6.             height:3000px;
  7.         }
  8.         .head{
  9.             left: 0;
  10.             top: 0;
  11.             height:50px;
  12.             position: fixed;
  13.         }
  14.         div{
  15.             width:100px;
  16.             height:100px;
  17.             background-color: red;
  18.         }
  19.         #html{
  20.             margin-top: 500px;
  21.         }
  22.         #css{
  23.             margin-top: 500px;
  24.         }
  25.         #js{
  26.             margin-top: 500px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <p class="head">
  32.         <a href="#html">html</a>
  33.         <a href="#css">css</a>
  34.         <a href="#js">javascript</a>
  35.     </p>
  36.     <div id="html">
  37.         html
  38.     </div>
  39.     <div id="css">
  40.         css
  41.     </div>
  42.     <div id="js">
  43.         javascript
  44.     </div>
  45.     <script>
  46.        $(".head a").click(function(){
  47.             var id = $(this).attr("href");
  48.             var offsetTop =  $(id).offset().top;
  49.             console.log(offsetTop)
  50.             $("html,body").animate({scrollTop:offsetTop})
  51.             return false;
  52.         })
  53.     </script>