12-javascript-JQuery的学习

JQuery

jQuery 是一个前前端库 里面有很多的封装的方法
特点：

• 1、强大的选择库
• 2、隐式迭代
• 3、强大的链式编程
  注：jQuery 向外暴露了两个对象 jQuery || $

1、选择器
jQuery 选择到的元素叫做 jQuery对象 jQuery对象不能使用原生js的方法 ！！！
通过原生 js 获取的元素 就是原生js的对象，不能使用jQuery的方法！！！

//1、通过id获取   
const box = $("#box")
box.setAttribute()   //原生js的方法，所以只能通过 原生js方法  才能获取到对象能够使用
//2、通过class类名获取  
const eles = $(".red")
//3、通过标签名获取元素
const ps = $("p")
//4、所有css 里面的选择器在这里都能使用
const firstLi = $('li:nth-child(1)')
const inp = $("input:checked")
const li = $("ul>li")
const lis = $("li:odd")
const lis = $("li:even")
//eq  选择器  通过索引  从0开始
const eq = $("li:eq(1)")

2、 筛选器

//1、获取dv2 下面的所有li
const lis = $(".dv2 li")
//2、找到所有元素里面的最后一个和第一个
const first = lis.first()
const last = lis.last()
//3、找到该元素的前一个兄弟元素和后一个兄弟元素
const dv1 = $(".dv1")
const prev = dv1.prev()
const next = dv1.next()
//4、获取前面的所有元素和后面的元素
const li = $(".dv1>ul>li:eq(4)")
const prevAll = li.prevAll()
const nextAll = li.nextAll()
//5、找到该元素的父元素和所有的父级元素
const parent = li.parent()
const parents = li.parents()
//6、查找某一个元素
const li = $(".dv1>ul>li:eq(3)")
const sp = li.parent().parent().find("span")

JQuery 的操作属性

1、获取元素属性 prop() 只能设置元素本身的属性

const box = $("#box")
//一个参数代表获取，两个参数代表设置
console.log(box.prop("id"))
box.prop("class","dv")
//如果不是元素本身就有的属性，可以设置和获取但是不能显示到元素身上
eg：box.prop("index",1)
console.log(box.prop("index"))

2、attr() 类似于setAttribute() 和prop() 最大的区别就是可以操作非元素本身的属性

box.prop("index1",123)
box.attr("inded2,456")
prop设置元素的属性 设置的类型是什么，获取的时候就是什么类型
attr设置的元素的属性，设置的值类型不管是什么 获取的时候都是string类型

3、removeProp() 移除某一个属性 偶尔有问题
4、removeAttr() 都可以移除

jQuery 操作元素类名

• 1、给元素添加类名 addClass()
• 2、移除元素的某一个类名 removeClass() 你要移除的是哪一个类名就直接写哪一个就可以了
• 3、切换元素类名 toggleClass()
  有就给你去掉 没有就加上
• 4、判断元素有没有一个类名 hasClass()

jQuery操作元素的内容

1、元素的文本内容 text() 完全替换

//如果不传参数是获取元素文本内容  传了参数是设置文本内容
const dv= $("div")
console.log(dv.text())
//加入内容  attr.text()+" 加的内容"
dv.text(dv.text() + "我是替换的内容")

2、元素的内容 html() 字符串形式

//不传参数是获取元素的内容   传了参数是设置元素的内容`attr.html('<p>我是一个p</p>')`
dv.html("<p>我是放出来的p</p>")

3、获取表单元素的内容 val()

//不传参数是获取表单元素的内容   传了参数是设置表单的元素
const input = $("input")
console.log(input.val())  //获取表单里面的内容
input.val("我是设置的内容") //设置表单元素的内容

jQuery 隐式迭代

const lis = $("li")
lis.click(()=>{
    console.log(123)
})

tab切换案例

<div class="box">
    <ol>
    	<li class="active">新闻</li>
		<li>娱乐</li>
		<li>游戏</li>
	</ol>
	<ul>
        <li class="active">新闻</li>
		<li>娱乐</li>
		<li>游戏</li>
	</ul>
</div>
<script src="./jquery/jquery.js"></script>
<script>
	const lis = $("ol li")
	lis.click(function(){
        //this 获取到的是一个具体元素， 不能使用 jQuery 的方法，如果想要使用jQuery的方法  那就必须要让他变成一个jQuery 对象，原生js  DOM  对象要变成jQuery对象，只需要加上一个  $()  就可以了
        //console.log($(this).parent())
       /* lis.removeClass("active")  //所有兄弟元素去掉类名
        $(this).addClass("active") //自己加上类名
       $(this).parent().next().find("li").removeClass("active") //让ul里面所有的li去掉类名
        //index( )  获取的是当前元素是父元素里面的第几个子元素
        $(this).parent().next().find("li").eq($(this).index().addClass("active"))*/
       // siblings() //获取所有的兄弟元素
     //使用链式编程  每一个方法返回值必须是 jQuery 对象
  $(this)  //当前元素
      .addClass("active")//给当前元素添加类名
      .siblings()//当前元素的所有兄弟元素
      .removeClass("active")//当前元素的所有兄弟元素移除类名
      .parent()//找到所有li的父元素 =》 ol
      .next()//ol 的下一个兄弟元素  =》 ul
      .find("li")//ul里面的所有li
      .eq($(this).index())//找到ul里面和当前元素同一个索引的 li
      .addClass("active")//给这个li加上类名
      .siblings()//获取这个li的所有兄弟元素
      .removeClass("")//给这个元素的所有兄弟元素去除类名
    })

</script>

操作元素的样式

const dv = $("div")
dv.css("width")  //   一个参数  获取
dv.css("width",800) //两个参数   设置    可以不带单位
.css("height",500)
.css("background-color","hotpink")
.css({   //也可以链式对象
    borderRadius:"50%",
    border:"10px solid red"
})

jQuery绑定事件的方式

const dv = $("div")
/1、/on 方法可以传多个参数   on(事件类型，事件处理函数)    

dv.on("click",function(){
    console.log(123)
})
//2、on(事件类型，事件委派，事件处理函数)
box.on("click",inner,function(e){
    console.log(this)//this  指向 使用on 方法的那个元素
    //找到事件委派元素
    if(e.target.nodeName === "DIV" && e.target.className === "inner"){
        console.log(123)
    }
})
//3、on(事件类型，传递的参数，事件处理函数)
box.on("click",{a:1234},function(e){
    //事件触发的时候，要传递的参数必须是对象的形式
    //要接收的参数，应该去 e.data里面查找
    console.log(e)
    const {a} = e.data
    console.log(a)//1234
})

//4、on(事件类型，事件委派，传递参数，事件处理函数)
box.on("click",'div',{username:"laos"},function(e){
    const data = e.data.username
    //console.log(data)
    //阻止冒泡  return false 是万能的
    return false
})
//5、解绑事件   需要和绑定事件的时候是同一个事件处理函数
function bindEvent(){
	console.log(123)
}
box.on("click",bindEvent)  //绑定
box.off("click",bindEvent)  //解绑

//6、trigger()   帮你触发某一个事件   元素.trigger(事件类型)
const btn = $("button")
btn.click(function(){
	//点击按钮的时候，帮我触发box的click事件  点击按钮的时候，触发div的事件
    //要触发某一个事件之前，需要先绑定了这个事件才能去触发
    box.trigger("click")
})

jQuery一些特殊的事件

1、不需要通过 on 进行绑定

• click
• hover 就是 mouseenter 和 mouseover 的组合
  2、one 绑定事件，只会触发一次

$(.dv).one("click",function(){
	console.log("触发了")
})
//原生 JS 里面有一个方法，叫做window.onload  页面所有资源加载完毕触发的事件   jQuery里面对应的页面资源加载完毕事件叫做  ready

$(window).ready(function(){
    console.log($(".dv"))
})
简写  $(function(){
    console.log(".dv")
})

操作jQuery元素 增删改查

//1、创建一个元素
const p = $('<p>你好呢</p>')
//2、append()   语法：父元素.append(要追加的元素)
box.append(p)
//3、appendTo()  把一个元素追加到另一个元素的末尾
//语法:追加的元素.appendTo(父元素)
p.appendTo(box)

//4、prepend() 把一个元素追加到另一个元素的开始位置
//语法：父元素.prepend(要追加的元素)
box.prevpend(p)

//5、prevpendTo()  把一个元素追加到另一个元素的开始位置
//语法：追加的元素.prependTo(父元素)
p.prepend(box)

//6、after() 在一个元素的后面追加一个元素  这两个是并列的关系(兄弟元素)
//语法：元素.after(要追加的元素)
box.after(p)  //在box后面追加元素p

//7、insertAfter() 在一个元素的后面追加一个元素  
//语法：要追加的元素.insertAfter(元素)
p.insertAfter(sp)  //在sp元素后面追加一个p元素

//8、before() 在一个元素的前面追加一个元素   这两个也是并列关系 (兄弟关系)
//语法:元素.before(要追加的元素)
sp.before(p)

//9、insertBefore()  在一个元素的前面追加一个元素  这两个也是并列关系 (兄弟关系)
//语法：要追加的元素.insertBefore(元素)
p.insertBefore(sp)

替换元素

//1、replacewith()
//语法：要被替换的元素.replacewidth(要用来替换的元素)
$("div span").replacewith(p)   //用p标签替换span

//2、replaceAll()   所有满足条件的元素都会被替换
//语法:要用来替换的元素.replaceAll(被替换的元素)
p.replaceAll($("div span"))

移除元素

//1、empty()  将内容清空(移除了所有的子元素)
$("div").empty()
 //2、remove()  自杀式清除(把自己和所有子元素一起从页面移除了)
$("div sapn").remove()

克隆元素

//1、clone()   子元素直接被克隆   但是没有克隆事件
//接受两个参数 都是布尔值   第一个参数是 是否克隆元素身上的事件，默认值是false
const c1 = $("div").clone()
const c2 = $("div").clone(true)
$("body").append(c1)
//第二个参数是 是否克隆子元素身上的事件  默认值和第一个参数保持一致

操作元素的宽高

1、width() height( )

//没有写参数的时候只能获取元素内容的宽高
console.log($("div").width())
console.log($("div").height())
//在行内设置
$("div").width(400)
$("div").height(400)

2、innerWidth() innerHeight() 获取元素 内容 + padding 的宽高

//没有写参数是获取   写了参数是改变元素的内容的宽高  padding宽度不变
console,log($("div").innerWidth())
console,log($("div").innerHeight())

3、outerWidth() outerHeight() 获取元素 内容 + padding + border S的宽高

//没有写参数是获取   写了参数是改变元素的内容的宽高  padding 和 border 宽度不变
console,log($("div").outerWidth())
console,log($("div").outerHeight())

//参数也可以是布尔值  默认值是false  代表是否加上元素的margin值
console,log($("div").outerWidth(true))  //true 代表的是元素的内容 + padding+ boreder + margin
console,log($("div").outerHeight(true))

获取元素的位置

1、offset() 获取的是元素到文档左边和上边的距离

$(".dv").offset()
//如果元素本身设置了定位，那就按照你的定位再去计算 left 和 top 值；如果没有设置定位，那就先给你设置为 relative 然后再计算left 和 top值
//总结：我设置的应该是这个元素到文档左边和上边的距离
$(".dv").offset((
	left:100,
    top:100
))

2、position() 元素到定位父1级的距离

console.log($(".dv").position())

3、scrollLeft() scrollTop 页面卷曲出去的距离

$(window).scroll(function(){
    //this指向的都是原生 js DOM 元素或者对象
    console.log($(this).scrollTop())
    console.log($(this).scrollLeft())
})
//例子  回到顶部
$("button").click(function(){
    $("html").scrollTop(0)
    $("html").scrollLeft(0)
})