jQuery小结一

最新推荐文章于 2024-06-19 23:35:43 发布

benlalagang

最新推荐文章于 2024-06-19 23:35:43 发布

阅读量86

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/benlalagang/article/details/126159345

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery实际是一个封装好的JS库，简化方便我们获取和操作DOM

入口函数

$(function(){

... // 此处是页面DOM加载完成的入口

})

$(document).ready(function(){

... // 此处页面DOM加载完成的入口

})

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源完成，jQuery帮我们完成了封装。
相当于原生JS的DOMContentLoaded
不同于原生JS load事件是等页面文档、外部的JS文件、css文件、图片加载完毕后才会执行内部代码。
更推荐标红的方式

jQuery 的顶级对象$

$是jQuery的别称，在代码中可以使用jQuery代替$,通常都直接使用$

$是jQuery的顶级对象，相当于JS中的window,把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

jQuery对象和DOM对象

1、用原生JS获取来的对象就是DOM对象

2、jQuery 方法获取的元素是jQuery对象

3、jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式储存）

4、jQuery对象只能用JQuery方法 DOM对象只能用DOM放法但是他们是可以相互转换的

DOM对象转换成jQuery对象：$(DOM对象)

$('div')

jQuery 对象转换为DOM对象（两种方式）

$('div')[index] index 是索引值

$('div').get(index) index 是索引值

<style>
    #von{
      width: 200px;
      height: 200px;
      background: #ff3355;
    }
</style>

<div id="von"></div>

<script>
    $(function () {
      let von = document.querySelector('#von')

      $('#von')[0].style.border = '4px solid #000000'
      $('#von').get(0).style.background = '#999999'

      $(von).css({
        width:600
      })
    })
</script>

jQuery 基础选择器

名称	用法	描述
ID选择	$("#id")	获取指定的ID元素
全选选择器	$('*')	匹配所有元素
类选择器	$('.box')	获取同一类class的元素
标签选择器	$('span')	获取同一类标签的所有元素
并集选择器	$('div,p,li')	选取多个元素
交集选择器	$('li.current')	交集元素同时拥有
子代选择器	$('ul>li')	>获取直接子元素，不会再向下获取
后代选择器	$("ul li")	使用空格，获取后代下所有指定元素

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的元素进行循环遍历，执行相应的方法，而不用我们进行循环方便我们调用

例如页面中有很多li 我们获取到进行一次操作所有的li都会发生

$('li').css('color','blue')

jQuery 筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$('li:eq(2)')	获取到的li元素中，选择索引号2的元素，索引号index 从0开始
:odd	$('li:odd')	获取到li元素中，选择索引号为奇数的元素
:even	$('li:even')	获取到li元素中，选择索引号为偶数的元素

jQuery 节点选择器

语法	用法	说明
parent()	$("li").parent	查找父级
children(selector)	$("ul").children("li")	相当于$("ul>li") 最近一级（亲儿子）
find(selector)	$("ul").find("li")	相当于$("ul li") 后代选择器
siblings(selector)	$(".first").siblings("li")	查找兄弟节点(参数不写就是全部的兄弟)，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(".last").prevtAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$("div").hasClass("proteced")	检查当前的元素是否含有某个特定的类，如果有返回true
eq(index)	$("li").eq(2)	相当于 $("li:eq(2)") index从0开始

一些小案例（核心代码）分享

导航下拉

鼠标移入下滑显示移出上滑隐藏

$(function () {

$('.nav-nei li').mouseenter(function () {

$(this).children('ul').stop().slideDown(200)

})

$('.nav-nei li').mouseleave(function () {

$(this).children('ul').stop().slideUp(200)

})

})

按照标签切换内容/图片

jQuery得到当前元素的索引号 $(this).index()

$('.left li').mouseenter(function () {

// 处理点击标签时样式的切换为当前点击的添加激活样式去除其他的

$(this).addClass('currend').siblings().removeClass('currend')

// 得到当前元素的索引号

let index = $(this).index()

// 标签和内容是一一对应的一个标签对应一个内容根据索引值进行操作

$('.right li').eq(index).show().siblings().hide()

})

对比原生的JS：

/*  导航显示  */
var lis1 = document.querySelector(".nav-nei").children
console.log(lis1)

for(var i =0;i<lis1.length;i++){
	lis1[i].onmousemove = function(){
		this.children[1].style.display = "block"
	}
	lis1[i].onmouseout = function(){
		this.children[1].style.display = "none"
	}
}


/*  标签切换  */
	var tabs = document.querySelector(".tab").querySelectorAll("li"),
	    contant = document.querySelector(".contant").querySelectorAll(".item");
	for(var i = 0;i<tabs.length;i++){
		tabs[i].setAttribute("index",i) // 给上层按钮 加上索引号
		tabs[i].onclick = function(){
			for(var i = 0;i<tabs.length;i++){
				tabs[i].className = "" // 点击后先把所有选中样式全部去掉
			}
			this.className = "currend" // 在单独给自己加上
			
			for(var i = 0;i<contant.length;i++){
				contant[i].style.display = "none"
			}
			// 这里直接用I 的话 它加到 5 了 所以娶不到
			contant[this.getAttribute("index")].style.display = "block"
		}
	}