jQuery基础使用与样式篇

jQuery基础使用与样式篇

作者：李文涛
撰写时间：2020年5月2日

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

	jQuery方法：jQuery( )；等同于：$( )：

这个方法可以得到一个jQuery对象，而要使用jQuery，首先要得到的就是一个jQuery对象。
// 通过选择器获取jquery对象。
$("#id")
// 标签对象转换为jquery对象。
$(document.body)
// 数组对象转换为jquery对象。
$([1,2,3])
// html标签转化为jquery对象。
$("

")
// $(document).ready()的缩写形式，表示DOM文档加载完毕执行回调，比window.onload先执行。
$(function(){})
// 将jquery对象转换为原生对象。
$("#id").get(0)
$("#id")[0]

jQuery选择器常用方法：
	$('ul li:first').html('<li>12345</li>')  // 选中第一个
    $('ul li:last').html('<li>12345</li>')  // 选中最后一个
    $('ul li:even').html('<li>12345</li>')  // 选中所有奇数个
    $('ul li:odd').html('<li>12345</li>')  // 选中所有偶数个
    $('ul li:eq(1)').html('<li>12345</li>')  // 选中下标，第某个
    $('ul li:gt(1)').html('<li>12345</li>')  // 选中下标，某个之后的全部
    $('ul li:lt(1)').html('<li>12345</li>')  // 选中下标，某个之前的全部

jQuery常用筛选方法：
	$('ul li').first().html('<li>12345</li>')  // 第一个
	$('ul li').last().html('<li>12345</li>')  // 最后一个
	$('ul li').eq(1).html('<li>12345</li>')  // 选中下标，第某个,得到jQuery对象；.get()得到原生对象
	$('ul li').not('.classname').html('<li>12345</li>')  // 选择类名为"classname"元素之外的所有元素
	$('ul li').hasclass('classname') // 返回一个布尔值，判断是否存在class="classname"
	$("ul").children(".classname").css("color", "blue");  // 遍历ul，选择类名为"classname"的所有子元素
	$(".classname").next().css("color", "blue");  // 选择类名为"classname"元素后面的一个元素
	$(".classname").nextAll().css("color", "blue");  // 选择类名为"classname"元素后面的所有元素
	$(".classname").prev().css("color", "blue");  // 选择类名为"classname"元素前面的一个元素
	$(".classname").prevAll().css("color", "blue");  // 选择类名为"classname"元素前面的所有元素
	$(".classname").parent().css("color", "blue");  // 选择类名为"classname"元素的直接父元素
	$(".classname").parents().css("color", "blue");  // 选择类名为"classname"元素的所有父元素
	$(".classname").parents().find('.child').css("color", "blue");  // 选中类名为"classname"元素下的所有子元素中查询到的.child元素

jQuery操作属性的常用方法：
	$('ul li').attr("title","这是一个li") // 添加属性
    $('ul li').attr({"title":"这是一个li","class":"li"}) // 添加多个属性
    $('ul li').removeAttr("title") // 移除一个属性
    $(':checkbox').prop("checked") // 获取复选框选中状态