jQuery小结一

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

入口函数

$(function(){

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

})

$(document).ready(function(){

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

}) 

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

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 基础选择器

 隐式迭代

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

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

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

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

 jQuery 筛选选择器

 jQuery 节点选择器 

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

导航下拉

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

    $(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;ilength;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;ilength;i++){
		tabs[i].setAttribute("index",i) // 给上层按钮 加上索引号
		tabs[i].onclick = function(){
			for(var i = 0;ilength;i++){
				tabs[i].className = "" // 点击后先把所有选中样式全部去掉
			}
			this.className = "currend" // 在单独给自己加上
			
			for(var i = 0;ilength;i++){
				contant[i].style.display = "none"
			}
			// 这里直接用I 的话 它加到 5 了 所以娶不到
			contant[this.getAttribute("index")].style.display = "block"
		}
	}