jQuery入门&选择器使用

一. 3W1H
1.What？
jQuery是什么？

jQuery是JavaScript库的一种，其中封装了很多JS代码。

常见的JavaScript库有：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto。

jQuery的官方网站:jQuery

2.Why?
为什么要学习jQuery？

(1) 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件(2)jQuery的优势：
    轻量级。核心文件才几十kb，不会影响页面加载速度
    跨浏览器兼容。基本兼容了现在主流的浏览器
    链式编程、隐式迭代
    对事件、样式、动画支持，大大简化了DOM操作
    支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
    免费、开源

3.Where?
哪些情况下使用？

(1).中大型网站开发。

(2).是一些前端框架的基础，比如EasyUI等。

4.How?

怎样使用？

使用jQuery步骤
    1.下载jQuery库
        开发版本：jquery-3.3.1.js
        生产版本：jquery-3.3.1.min.js
    2.引入：将js文件复制到项目中
    3.使用

二. jQuery入口函数
两种写法

s(function () {
			    ...//此处是页面DOM加载完成的入口
			});

s(document).ready(function(){
		...//此处是页面DOM加载完成的入口
		})

三.jQuery选择器
(1).jQuery中的选择器就是一个标记，为了快速获取指定的标签。

(2).jQuery中常见选择器： ID选择器、class选择器、element选择器、子代选择器、后代选择器、相邻兄弟选择器、分组选择器等。

(3).jQuery中部分选择器使用：

//加载函数
		$(function(){
		//id选择器的使用
		//jQuery的样式设置 通过css方法进行设置即可
		//一个属性设置
		 $("#ul1").css("color","red")
		//多个属性的设置 通过json格式进行
		//{"属性":"属性值","属性":"属性值"}
		 $("#ul1").css({
		 "background":"red",
		 "color":"yellow"
		 });
 
		//类选择器 一组元素
		 $(".sb").css("background","red");
 
		//元素 一组元素
		 $("li").css("background","red");
 
		//通配符选择器 *
		 $("*").css("background","red");
		//群组选择器 可以同时设置多个标签的样式
		 $("#ul1,.oBox").css("background","red");
 
		//设置ul下的子li的字体颜色
		 $("#ul1>li").css("color","red");
 
		//所有后代
		 $("#ul1 li").css("color","red");
 
		//过滤选择器的使用
		//：first 获取第一个节点、
		 $("#ul1>li:first").css("background","red");
		// //:last 获取最后一个节点
		 $("#ul1>li:last").css("background","red");
		//获取指定的节点 下标
		 $("#ul1>li:eq(2)").css("background","yellow");S
 
		//even 奇数 过滤下标为偶数 位置为奇数的标签
		 $("#ul1>li:even").css("background","yellow");
 
		//odd 偶数 过滤下标为奇数 位置为偶数的标签
		 $("#ul1>li:odd").css("background","yellow");
 
		//gt() 大于 不包括自己
		 $("#ul1>li:gt(2)").css("background","yellow");
		//lt()小于 不包括自己
		 $("#ul1>li:lt(2)").css("background","yellow");
 
		//区间设置背景颜色
		//注意事项 如果gt 和 lt 混合使用 并且gt在前 那么获取元素的下标i重新编号
		 $("#ul1>li:gt(0):lt(3)").css("background","yellow");
		//案例 隔行换颜色
		 $("table tr:gt(0):even").css("background","red");
		 $("table tr:gt(0):odd").css("background","yellow");
		//根据给的内容查找
		 $("#ul1>li:contains('zz')").css("background","yellow");
		//表单选择器
		 $(":input").css("background","red");
		 $("form>input:input").css("background","red")
		//获取普通文本
		 $("form>input:input:text").css("background",red"");
 
		//单选
		console.log($("#demo1>input:radio"));
		//获取选中
		console.log($("#demo1>input:radio:checked"));
		//获取value
		console.log($("#demo1>input:radio:checked").val());
 
		//复选框
		console.log($("#demo2>input:CheckBox"));
 
		//获取选中复选框
		console.log($("#demo2>input:CheckBox:checked"));
 
		//复选框
		console.log($("#demo2>input:CheckBox"));

四、排他思想

//想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
 
$(this).css(“color”,”red”);
 
$(this).siblings(). css(“color”,””);