day11

今天学了什么

外部JS与JQuery依赖关系处理

外部JS与JQuery.png
外部JS.png

1配置JQuery

JQuery官网下载
jquery-3.3.1.min.js

 <script src="lib/jquery-3.3.1.min.js"></script>

在线JQuery配置

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.JQuery选择器

2.1基本选择器

$("#one")
$(".two")
$("p”)
$("*")
$("p,div")

1.2层次选择器

$(“div >p”)
$(“div p”)
$(“div+p”)
$(“div~p”)

1.3过滤选择器

1.3.1.基本过滤

$("p:first-child")
$("p:last-child")
$(“p:first”)
$(“p:last”)
:not(selector)
$(“div:not(.one)”)
$("p:even")  //选择所有偶数项
$(“p:odd”)
$("p:eq(index)")
$(“p:gt(index)”)
$(“p:lt(index)”)
$(“:focus”)

1.3.2内容过滤选择器

$("p:contains(hello)")  //选取文本中含有”hello”的p元素
$(“div:has(p)”)  //选取含有p元素的div元素
$(“div:parent”)   //选取含有子元素或者文本的元素  

1.4可见性过滤选择器

$(“:hidden”)>只能对display：none起作用
$(“div:visible”)    

1.5子元素过滤选择器

:nth-child(index)
:first-child
:last-child //选中父元素中的最后一个元素
:only-child

<p class="one two">
    <span>hello world</span>
</p>
$(“p span:only-child”)
//span是p的唯一子元素时,改变

2.DOM

   <ul>
       <li class="one">1</li>
       <li>2</li>
       <li>3</li>
   </ul>

2.1查找节点

查找元素节点
text() 获取元素文本
text(value) 修改元素的文本
html() 返回标签个内容含HTML标签
val()返回标签的值

    <script>
     var txt=$("li:eq(1)").text("hello world");
     console.log(txt);
   </script>

查找属性节点
attr(key)获取属性的值

  <script>
     var attr=$("li:eq(0)").attr("class");
     console.log(attr);//one
    </script>

2.2创建节点

a.创建元素节点

var p = $(“<p></p>”)

b.创建文本节点

var li4 = $("<li>04</li>")

c.创建属性节点

var $li=$("<li title='香蕉'>香蕉</li>");

2.3插入节点

向尾部添加（孩子）
append();

向头部添加（孩子）
prepend();

   <ul>
       <li class="one">1</li>
   </ul>
    <script>
        var $li=$("<li>2</li>");
        var $li_one=$("<li>0</li>")
        $("ul").append($li);
        $("ul").prepend($li_one);
    </script>

在元素后面添加元素(兄弟)
after();
insertAfter();

<p>hello world</p>
<script>
    var $p = $("<p>后面</p>");
    $p.insertAfter("p");
</script>

2.4删除节点

value.remove()

 <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
  <button id="btn">btn</button>
    <script>
       $("#btn").click(function(){
            $("ul>li:eq(1)").remove();
       })
    </script>

value.empty()
让标签的内容消失

<div>hello world</div>
    <script>
     $("div").empty();
    </script>

2.5 替换节点

replaceWith()

  <p>hello world</p>
    <script>
        $("p").replaceWith("<strong>replace</strong>")
    </script>

replaceAll()

  <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <script>
        $("<strong>replace</strong>").replaceAll("p")
    </script>

2.6 包裹节点

wrap 在外面包裹
wrapInner 将元素的的子内容(包括文本节点)包裹起来

  <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <script>
        $("p").wrap("<strong></strong>")
        $("p").wrapInner("<div></div>")
    </script>

<strong><p><div>p</div></p><strong>

2.7 属性操作

attr();

<p title="水果">你喜欢的水果是?</p>
//获取title属性
$(“p”).attr(“title”); 

//设置title属性

$("p").attr("title","苹果"); 
//设置多个属性
$("p").attr({"title":"苹果",class:"two"});

removeAttr();

$("p").removeAttr("title")

2.8 样式操作

A.获取样式和设置样式

$(“p”).attr(“class”,”high”)

B.追加样式

$(“p”).addClass()

C.移除样式

$(“p”).removeClass()

D.切换样式
toggleClass()

<script>
<p title="水果" class="one">你喜欢的水果是?</p>
<button >btn</button>
<script>
    $("button").click(function(){
        $("p").toggleClass("high")
    })
</script>

E.判断是否含有某个样式
hasClass()
//判断是否含有某个class,返回true或false

<p title="水果" class="one">你喜欢的水果是?</p>
<button >btn</button>
<script>
    $("button").click(function(){
        if($("p").hasClass("high")){
            $("p").hide(300);
        }else{
            $("p").addClass("high")
        }
    })
</script>

//Jquery内部实际上是调用了is()方法来完成这个功能
$(“p”).is(“.high”) //返回boolean值
//语法.is(selector)

3.遍历节点

a. children()方法
所有子级元素
b.next()
找到元素的下一个元素
c.prev()
找到元素的上一个元素

 <div>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
    </div>
    <script>
      var childs=$("div").children();
      childs.css({color:"red"});
      $("p:eq(1)").prev().css({backgroundColor:"green"});
      $("p:eq(1)").next().css({backgroundColor:"yellow"});
    </script>

d.siblings();
//获取（除自己）匹配元素前后所有的同辈元素

    <script>
      var sibs=$("p:eq(0)").siblings();
      sibs.css({color:"red"});
    </script>

e.closet();
closest() 从本身开始找,逐级匹配,并返回最先匹配的祖先元素
f.closet(),parent(),parents()的区别
parent()匹配父级 亲爹
parents() 获取祖先

    <div class="grandfather">
        grandF
        <div>
            parent
            <p>hello world</p>
        </div>
    </div>
    <script>
        $(function () {
            // var parent = $("p").parent();
            // var parents = $("p").parents();
            var closet = $("p").closest(".grandfather");
            console.log(closet);
        })
    </script>

4.过滤节点

a.eq(index)
b.not()
c.first()
d.last()
e.is()
f.filter()

<ul>
        <li>1</li>
        <li class="one">1</li>
        <li>1</li>
    </ul>
    <script>
      $("li").filter(".one").css({color:"red"});
    </script>

5.css的操作

a.获取样式
(“p”).css(“color”); b.修改样式(“p”).css({“color”,”yellow”});
c.offset()
//获取元素在当前视窗的相对偏移
(“p”).offset().left; //获取左偏移(“p”).offset().top; //获取顶部偏移

//css
 <style>
        div{
            width: 100px;
            height: 100px;
            background:red;
            margin: 100px;
        }
    </style>
//html
   <div>
   </div>
    <script>
     $(function(){
         debugger;
         var left=$("div").offset().left;
         var top=$("div").offset().top;
     })
    </script>

d.postion();
获取定位元素
left //获取left的值
top //获取top的值