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"));

四.jQuery里面的排他思想

//想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);

$(this).siblings(). css(“color”,””);