jQuery——概述、使用、选择器、DOM操作

目录

• jQuery概述
• jQuery的使用
  • JQuery对象和JS对象区别与转换
• jQuery选择器
  • 基本选择器
  • 层级选择器
  • 属性选择器
  • 过滤选择器
  • 表单属性选择器
• jQuery的DOM操作
  • 文本 / 值 操作
  • 属性操作
  • CRUD操作

jQuery概述

跳转到目录 jQuery 是一个快速、简洁的 JavaScript 框架，是一个优秀的 JavaScript 代码库，jQuery 设计的宗旨是“write Less，Do More”，倡导写更少的代码做更多的事。它封装 JavaScript 常用的功能代码，提供简便的 JavaScript 设计模式，优化 HTML 文档操作，事件处理、动画设计和Ajax交互。

• JavaScript框架：本质上是一些js文件，封装了js的原生代码.

jQuery的使用

跳转到目录

1、目前jQuery有三个大版本：

• 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

2、导入 JQuery 的 js 文件

1. 导入min.js 文件，我使用的是 jquery-3.3.1.min.js 版本
2. 在项目中创建js目录，把 jquery-3.3.1.min.js 复制到目录中去
3. 在HTML页面导入：

3、jquery-xxx.js 与 jquery-xxx.min.js区别：

• jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
• jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

4、JQuery对象和JS对象区别与转换

跳转到目录 JQuery对象在操作时，更加方便，但是 JQuery 对象和 js 对象方法不通用的，很多时候需要两者相互转换

jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
js -- > jq : $(js对象)

    
    myJQuery
    


    JQuery的使用
    我是VIP1
    我是VIP2

    // 使用JQuery
    var div1 = $("#div1");
    alert(div1.html());
    var div2 = $("#div2");
    alert(div2.html());
 
    // JQuery对象JS对象相互转换
    var divs = document.getElementsByTagName("div");
    for(var i =0;i
		$("#b2").click(function () {
			$("div").css("background-color", "red");
		});

		// 
		$("#b3").click(function () {
			$(".mini").css("background-color", "red");
		});

		// 
		$("#b4").click(function () {
			$("span, #two").css("background-color", "red");
		})
	

【2】层级选择器 跳转到目录

后代选择器
    语法： $("A B") 选择A元素内部的所有B元素 (包括儿子,孙子等)       
子元素选择器
    语法： $("A > B") 选择A元素内部的所有B子元素(只会查找儿子)
相邻兄弟选择器
	语法： $("A + B") 选择A元素后面的一个B元素(同级关系)
通用兄弟选择器
	语法： $("A ~ B") 选择A元素后面的所有B元素(同级关系)
兄弟姐妹选择器    
	语法： $("A").siblings("B") 选择A元素前后的所有B元素(同级)

		// 
		$("#b1").click(function () {
			// 相当于后代选择器 A B
			$("body div").css("background-color", "red");
		});
		
		// 
		$("#b2").click(function () {
			// 相当于 子元素选择器,找body的子元素(不包括子孙元素) A>B
			$("body>div").css("background-color", "red");
		});

		// 
		$("#b3").click(function () {
			// 相当于 相邻兄弟选择器(只包括后面的一个div)
			$("#one+div").css("background-color", "red");
		});

		// 
		$("#b4").click(function () {
			// 相当于 通用兄弟选择器(包括后面的所有的同级div)
			$("#two~div").css("background-color", "red");
		});

		// 
		$("#b5").click(function () {
			// siblings表示兄弟节点(包括前面和后面的同级div)
			$("#two").siblings("div").css("background-color", "red");
		});
	

【3】属性选择器 跳转到目录

属性名称选择器 
    语法： $("A[属性名]") 包含指定属性的选择器
属性选择器
    语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
复合属性选择器
    语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器

	// 
	$("#b1").click(function () {
		$("div[title]").css("background-color", "red");
	});

	// 
	$("#b2").click(function () {
		$("div[title='test']").css("background-color", "red");
	});

	// 
	$("#b3").click(function () {
		// 包含没有title属性的
		$("div[title!='test']").css("background-color", "red");
	});

	// 
	// 相当于 String的 startWith方法
	$("#b4").click(function () {
		$("div[title^='te']").css("background-color", "red");
	});

	// 
	$("#b5").click(function () {
		$("div[title$='est']").css("background-color","red");
	});

	// 
	$("#b6").click(function () {
		$("div[title*='es']").css("background-color", "red");
	});

	// 
	$("#b7").click(function () {
		$("div[id][title*='es']").css("background-color", "red");
	});

【4】过滤选择器 跳转到目录

首元素选择器 
    语法： :first 获得选择的元素中的第一个元素
尾元素选择器 
    语法： :last 获得选择的元素中的最后一个元素
非元素选择器
    语法： :not(selector) 不包括指定内容的元素
偶数选择器
    语法： :even 偶数，从 0 开始计数
奇数选择器
    语法： :odd 奇数，从 0 开始计数
等于索引选择器
    语法： :eq(index) 指定索引元素
大于索引选择器 
    语法： :gt(index) 大于指定索引元素
小于索引选择器 
     语法： :lt(index) 小于指定索引元素
标题选择器
    语法： :header 获得标题（h1~h6）元素，固定写法

	// 
	$("#b1").click(function () {
		$("div:first").css("background-color", "red");
	});

	// 
	$("#b2").click(function () {
		$("div:last").css("background-color", "red");
	});

	// 
	$("#b3").click(function () {
		$("div:not(.one)").css("background-color", "red");
	});

	// 
	$("#b4").click(function () {
		// 从0开始算
		$("div:even").css("background-color", "red");
	});

	// 
	$("#b5").click(function () {
		$("div:odd").css("background-color", "skyblue");
	});

	// 
	$("#b6").click(function () {
		$("div:gt(3)").css("background-color", "green");
	});

	// 
	$("#b7").click(function () {
		$("div:eq(3)").css("background-color", "pink");
	});

	// 
	$("#b8").click(function () {
		$("div:lt(3)").css("background-color", "yellow");
	});

	// 
	$("#b9").click(function () {
		$(":header").css("background-color", "red");
	});

	// 
	$("#b10").click(function () {
		// :animated
	});

	$("#mover").togglee(3000, function () {
		$(this).toggle(3000);
	});

【5】表单属性选择器 跳转到目录

可用元素选择器 
    语法： :enabled 获得可用元素
不可用元素选择器 
    语法： :disabled 获得不可用元素
选中选择器 
    语法： :checked 获得单选/复选框选中的元素
选中选择器 
    语法： :selected 获得下拉框选中的元素

    // 
    $("#b1").click(function () {
        // 获取多个input标签属性值是 enabled, type属性值是text 返回数组
        $("input[type='text']:enabled").val("enabled");
    });

    // 
    $("#b2").click(function () {
        $("input[type='text']:disabled").val("disabled");
    });

    // 
    $("#b3").click(function () {
        var len = $("input[type='text']").length;
        alert(len);
    });

    // 
    $("#b4").click(function () {
        var $inputs = $("option:selected");
         	for (var i = 0; i 
        $("#b1").click(function () {
            $("#bj").remove(); // 自己可以删除自己,在js中只能通过父节点来删除
        })

        // 
        $("#b2").click(function () {
            $("#city").empty();
        })