JavaScript jQuery基础使用与样式篇

初学者liwd 2020-05-05 11:38:14

//1.1 什么是 jQuery ？
/*
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，jQuery还提供了大量的插件
*/
//1.2 如何使用jQuery
/*
jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可
jQuery下载地址：https://jquery.com/download/
*/
//1.3 jQuery的语法
/*
jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作
基础语法：$(selector).action();
- $美元符号定义jQuery
- selector 选择符需要查找的元素支持css1~css3中的主流选择器
- action() 执行对元素的操作
例如：
$("p").hide();//隐藏所有 <p> 元素
*/

//1.0 jQuery选择器
/*
页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。
jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。
jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起:
*/
//1.1 ID选择器 $("#id");
/*
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，
将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
*/
//通过ID选择器获取元素

//1.0 jQuery选择器之基本筛选选择器
/*
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，
为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器
*/
//筛选选择器的用法与CSS中的伪元素相似，选择器用冒号":"开头，基本筛选器的描述见jQuery API文档：*/
/*
选择器
$(":first") 获取匹配第一个元素例如:$('li:first');
$(":last") 获取匹配的最后个元素例如:$('li:last');
$(":not(selector)") 去除所有与给定选择器匹配的元素例如:$("input:not(:checked)")
$(":even") 匹配所有索引值为偶数的元素，从 0 开始计数例如:$("li:even")
$(":odd") 匹配所有索引值为奇数的元素，从 0 开始计数例如:$("li:odd")
$(":eq(index)") 匹配一个给定索引值的元素，从 0 开始计数例如:$("li:eq(1)")
$(":gt(index)") 匹配所有大于给定索引值的元素，从 0 开始计数例如:$("li:gt(0)")
$(":lt(index)") 匹配所有小于给定索引值的元素，从 0 开始计数例如:$("li:gt(2)")
$(":header") 匹配如 h1, h2, h3之类的标题元素例如:$(":header").css("background", "#EEE");
$(":animated") 匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)
例如:$(":header").css("background", "#EEE");
$(":focus") 匹配当前获取焦点的元素。
$(":root") 选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样，永远是<html>元素。
示例:设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");

...全文