jQuery基础教程：页面加载、对象转换与选择器详解

单纯像沙漠中的花，周围是咆哮的风沙

简介

• 概念
  • 是一个快速、小巧、功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单，因为它提供了一个易于使用的API，可以跨多种浏览器工作
• 优点
  • 具有独特的链式语法和短小清晰的多功能接口
  • 具有高效灵活的css选择器，并且可对css选择器进行扩展
  • 拥有便捷的插件扩展机制和丰富的插件
  • 兼容各种主流浏览器，极大的简化了Javascript编程
• 版本
  • 分别为1.x、2.x、3.x
    • 1.x版本：能够兼容IE6、7，8浏览器，不在更新
    • 2.x版本：不兼容IE6、7，8浏览器，不在更新
    • 3.x版本：不兼容IE6、7，8浏览器，更加的精简
• 与原生js的区别
  • 原生js存在的缺点
    • 不能写多个入口函数(不能给window用on的方式注册多个load事件)
    • api的名字太长，并且有些api有浏览器兼容问题
    • 代码有些冗余(两个for循环)
    • 容错率低，前面的代码出了问题后面的代码不会执行
  • jQuery的优点
    • 查找元素的方法多种多样，非常灵活
    • 拥有隐式迭代特性，因此不再需要手写for循环
    • 完全没有兼容性问题
    • 实现动画非常简单，而且功能更加的强大
    • 代码简单，粗暴

页面加载

• 使用
  • 导入jQuery文件
  • 写一个入口函数
  • 找到想要操作的元素(选择器)，从而去操作他
• 入口函数
  • 第一种写法：$(document).ready(function(){})
  • 第二种写法：$(function(){})
• $函数(方法)
  • $是引入jQuery文件后window对象中的一个方法，window.$等价于window.jQuery
  • $ is not defined：jQuery文件没有引入
  • $既然是一个方法，那肯定可以传递参数，根据传递的参数不同，得到的效果也不同
    • 如果传入的是一个匿名函数，那就是一个入口函数
    • 如果传入的是一个字符串，那有可能是一个选择器 $('div')、$('#btn')，也有可能创建元素$('<a href = "https://www.baidu.com">百度一下</a>')
    • 如果传入的是一个DOM对象，那就会把这个DOM对象转化成jQuery对象
• jQuery入口函数与window.onload对比
  • jQuery入口函数可以写多个，window.onload不能
  • 执行时机不同，jQuery入口函数优先于window.onload执行
    • jQuery入口函数等待着页面上的DOM树加载完成时执行
    • window.onload要等待页面上所有的资源(DOM树、外部链接的图片、js、css…)都加载完成后才执行

jQuery对象和DOM对象

• jQuery对象
  • 用jQuery的选择器获取到的对象
  • jQuery对象是一个伪数组，里面包含的是DOM对象，Query对象其实是DOM对象的包装集
  • 特点：只能调用jQuery的方法，不能调用原生js的属性和方法
• DOM对象
  • 用原生js的选择器获取到的对象
    • document.getElememtById()：反馈的是元素
    • document.getElementsByTagName()：获取到的是伪数组，集合中的每一个对象是DOM对象
  • 特点：只能调用原生js的属性和方法，不能调用jQuery方法
• jQuery对象和DOM对象的相互转换

  • jQuery对象转换成DOM对象： jQuery对象.get(索引值)，jQuery对象[索引值]

    let $divs = $('div')
    console.log($divs[1])
    console.log($divs.get(2))
    

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

    let div1 = document.getElementById('div1')
    let $div1 = $(div1)
    console.log($div1)
    

选择器

• 基本选择器

  名称	用法	描述
  ID选择器	$(‘#id’)	获取指定ID的元素
  类选择器	$(‘.class’)	获取同一类class的元素
  标签选择器	$(‘div’)	获取同一类标签的所有元素
  并集选择器	$(‘div,p,li’)	使用逗号分隔，只要符合条件之一就可
  交集选择器	$(‘div.redClass’)	获取class为redClass的div元素

• 层级选择器

  名称	用法	描述
  子代选择器	$(‘ul>li’)	使用>号，获取儿子层级的元素 注意 ：并不会获取孙子层级的元素
  后代选择器	$(‘ul li’)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

• 过滤选择器 (注意：此类选择器都带冒号)

  名称	用法	描述
  :eq(index)	$(‘li:eq(2)’).css(‘color’,‘red’)	获取到的li元素中，选择索引值为2的元素 索引值index从0开始
  :odd	$(‘li:odd’).css(‘color’,‘red’)	获取到的li元素中，选择索引值为奇数的元素
  :even	$(‘li:even’).css(‘color’,‘red’)	获取到的li元素中，选择索引值为偶数的元素

• 筛选选择器

  名称	用法	描述
  children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’)，子代选择器
  find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)，后代选择器
  siblings(selector)	$(‘#first’).siblings(‘li’)	查找兄弟节点，不包括自己本身
  parent()	$(‘#first’).parent()	查找父亲
  eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’) index从0开始
  next()	$(‘li’).next()	找下一个兄弟
  nextAll()	$(‘li’).nextAll()	之后所有的兄弟
  prev()	$(‘li’).prev()	找上一个兄弟
  prevAll()	$(‘li’).prevAll()	之前所有的兄弟

原文地址：https://blog.csdn.net/chaosweet/article/details/142924442

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！