day11

今天学了什么

外部JS与JQuery依赖关系处理

外部JS与JQuery.png

外部JS.png

1配置JQuery

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

 

在线JQuery配置


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

hello world

$(“p span:only-child”) //span是p的唯一子元素时,改变

2.DOM

   
  • 1
  • 2
  • 3

2.1查找节点

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

    

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

  

2.2创建节点

a.创建元素节点

var p = $(“

”)

b.创建文本节点

var li4 = $("
  • 04
  • ")

    c.创建属性节点

    var $li=$("
  • 香蕉
  • ");

    2.3插入节点

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

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

       
    • 1

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

    hello world

    2.4删除节点

    value.remove()

     
    • 1
    • 2
    • 3

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

    hello world

    2.5 替换节点

    replaceWith()

      

    hello world

    replaceAll()

      

    hello world

    hello world

    hello world

    2.6 包裹节点

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

      

    hello world

    hello world

    hello world

    p

    2.7 属性操作

    attr();

    你喜欢的水果是?

    //获取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()

    
    

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

    你喜欢的水果是?

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

    3.遍历节点

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

     

    hello world

    hello world

    hello world

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

        
    

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

        
    grandF
    parent

    hello world

    4.过滤节点

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

    • 1
    • 1
    • 1

    5.css的操作

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

    //css
     
    //html
       

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

    你可能感兴趣的:(day11)