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

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();

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

hello world

2.4删除节点

value.remove()

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的值