JQuery获取元素

jQuery

• jQuery 是一个高效、精简并且功能丰 富的 JavaScript 工具库
• 由John Resig 在 2006 年 1 月，jQuery 正式发布
• query 本身是选择的意思，主要对 JavaScript 中的选择元素的方法进行了大量的优化。

版本发展

• 1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。
• 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。
• 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在 jQuery 官方主要的维护升级的 版本。
• http://jquery.com/download/ 或 https://www.bootcdn.cn/jquery/
• 使用 jQuery 过程，可以参考 API 应用手册

jQuery 常见操作

1.$() 方法

在 DOM 操作中，基本都是从获取元素开始的,jQuery 中封装了一个更加强大的获取元素方法 $()

• 在 jQuery 中，只有一个全局变量 $,这是 jQuery 的一大特点，避免了全局变量的污染。
• 最开始变量不叫做 $，叫做 jQuery() 方法，在库中两个名字是并存的，都可以使用。
• 经典报错：$ 未定义，此时可能是没有引入jq文件或者是文件路径有问题
  例：通过类选择器获取元素
  $('.box')

2.jQuery 对象

• $() 方法获取到的内容叫做 jQuery 对象
• 内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法。
• 通过 $() 获取的元素是一组元素，进行操作时是批量操作。

// 获取所有标签为p的元素,改变背景颜色，属名和属性值都是字符串类型
$('p').css('backgroundColor', 'yellow');
// 更改标签内容
$('p').html('lalala');
// 设置动画，{ }内写变化后的属性，2000为间，单位是毫秒
$('p').animate({
 'width': 1000
}, 2000);

jQuery 对象和原生 js 对象

• 区别
  1. jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法。
  2. 原生 JS 对象也不能使用 jQuery 的方法。
  3. jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的 jQuery 的方法和属性。
• 获取 jQuery 对象中原生 js 对象的个数的方法
  1. $().length
     $('p').length
  2. $().size()
     $('p').size()
• 互相转换

  1. jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。

     // 声明一个变量表示用jq获取的p 对象类数组
     let $ps = $('p')
     // 通过数组下标方式可以获取到js原生对 象,就可以使用js 原生对象的方法了
     $ps[0].style.color = 'red'
     

  2. 原生转 jQuery：将原生对象用 $() 方法包裹即可

     let op = document.getElementsByTagName('div')[0]
     $(op).css('backgroundColor', 'skyblue')
     

jQuery 选择器 和 选择方法

1. 使用 CSS2.1 和 CSS3 中的选择器，都可以传入$()

   • 参数：必须是字符串格式的选择器。
     $('p').html('woshishuoyoude') 所有的 p
     $('div p').html('我是box里的p') div 里的 p
     $('input:disabled').css('color', 'black') 选中的是被禁用的(设置了disabled属性)input
     $('input:enabled').css('color', 'black') 选中的是没被禁用的(没设置disabled属性)input
     $(':input').css('color', 'yellow') 选中所有表单元素

2. jQuery 中新增的自己的选择器
   筛选选择器，也叫过滤选择器

   • 用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作 为高级选择器的一部分。
   • 常用：
     $(":first") 第一个
     $(":last") 最后一个
     $(":eq(index)") 下标为 index 的项
     $(":gt(index)") 大于下标为 index 的项
     $(":lt(index)") 小于下标为 index 的项
     $(":odd") 下标为奇数的项
     $(":even") 下标为偶数的项
     $(":not(selector)") 去除所有与给定选择器匹配的元素
     $('p:not(:first)').css('background-color', 'yellow') 选中去掉第一个 p 后剩下的所有p

3. 筛选的方法

   • 也叫过滤方法，jQuery 中除了用选择器选择元素，jQuery 对象内还封装了一些对应的筛选方法。
   • 常用：
     $(“p”).first() ：选中被选中p中的第一个
     $(“p”).last() ：选中被选中p中的最后一个
     $(“p”).eq(3) ：选中下标为3的p