遥远的jQuery（一） | 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

本期开始我们重新复盘一下jQuery语法！

• jQuery是一个高效、精简并且功能丰富的JavaScript工具库，主要对JavaScript中的选择元素的方法进行了大量的优化
• 获取元素：类名：$(".box") ID：$("#box")
• 获取CSS样式，并设置：$("#box").css("width")         $("#box").css("width",200)
• 事件简化：$("#box").click(function(){ $(this).css("background-color","skyblue") })
• 运动简化：$(".box").animate({"width": 500},1000)
• $()方法
  • 在jQuery中，只有一个全局变量$，这是jQuery的一大特点，避免了全局变量的污染
  • Jquery("") == $("")
• JQuery对象
  • $()方法获取到的内容叫做JQuery对象
  • 内部封装了大量的属性和方法，比如.css()和.html()（标签内容）和.animate()等方法都是JQuery对象的方法
  • 通过$()获取的元素是一组元素，进行操作时是批量操作
• JQuery对象和原生js对象
  • JQuery对象得到后，只能使用JQuery对象的方法，不能使用原生js元素对象的方法（$("p").innerHTML会报错）
  • 原生JS对象也不能使用JQuery的方法（ps[0].html("haha")会报错）
  • JQuery对象实际是一个类数组对象，内部包含所有的获取的原生js对象，以及大量JQuery的方法和属性
• JQuery对象和原生JS对象的转换
  • JQuery转原生：直接利用数组下标方式，得到JQuery封装的原生对象：var $ps = $("p")   $ps[0].innerHTML = "hello"
  • 原生转JQuery：将原生对象用$()方法包裹即可：`var op = document.getElementByTagName("p")[0]$(op).css("background-color", "skyblue")`
• 选择器
• 也叫过滤选择器，JQuery中新增了自己的选择器
  • 用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分，或者作为高级选择器的一部分

本期内容就到这里啦！