jQuery基础

jQuery

简介

  jQuery是轻量级的JavaScript库。它封装了很多预定义的对象和实用函数，能够帮助使用者优化HTML文档操作、事件处理、动画设计和Ajax交互。
    
1.兼容多浏览器
	IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
	核心代码也就几十KB 加载速度快 极大的提升编写效率 
3.宗旨
	"Write less, do more."
4.Ajax交互
	异步提交 局部刷新(django部分再学)

导入jQuery

1.CDN加速服务(在head中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.jQuery官网下载本地导入
// 引入本地
    <script src="jQuery3.6.js"></script>

基本使用

// 将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码:
  let p1Ele = document.getElementsByTagName('p')[0]
  let p2Ele = document.getElementsByTagName('p')[1]
  p1Ele.style.color = 'red'
  p2Ele.style.color = 'green'

jQuery代码:	$('#d1').css('color','red').next().css('color','green')

jQuery查找标签

#基本选择器
$('#d1')  			// id选择器  
$('.c1')  			// class选择器  
$('p')  			// 标签选择器
$('div#d1')  		// 嵌套使用
$('div,#d1,.c1')  	// 组合选择器
$("x y")			// x的所有后代y（子子孙孙）
$("x > y")			// x的所有儿子y（儿子）
$("x + y")			// 找到所有紧挨在x后面的y
$("x ~ y")			// x之后所有的兄弟y

基本筛选器

$('ul li:first')  // 查看ul标签中第一个li标签
$('ul li:last')  // 查看ul标签最后一个li标签
$('ul li:eq(2)')  // 查看ul标签中索引为2的li标签
$('ul li:odd')  // 查看ul标签中索引为偶数的li标签
$('ul li:even')  // 查看ul标签中索引为偶数的li标签
$('ul li:gt(2)')  // 查看ul标签中索引大于2的li标签
$('ul li:lt(2)')  // 查看ul标签中索引小于2的li标签
$('ul li:not(li)')  // 查看ul标签中不是li的的li标签
$('ul:has(#d1)')  // 查看内部含有id是d1的ul标签

属性选择器

#包含指定属性的
$("[type]")
$('[name]')
选择所有有type属性的元素

#包含指定属性且等于指定值的
$("[class='p1']")
选择使用有class属性且属性值为p1的元素

#包含指定属性不等于指定值的
$("[class!='p1']")
选择使用有class属性但是属性值不为p1的元素

表单选择器

$('input[type="text"]')	 筛选器简化>>>  $(':text')
$(':checked')  // 会将option也找到
$(':selected')  // 只会找到option标签

筛选器方法

// 同级别往下查找
$("#id").next()  // 同级别下一标签
$("#id").nextAll()  // 同级别下所有标签
$("#id").nextUntil("#i2")  // 同级别下到id为i2的标签
// 同级别往上查找
$("#id").prev()  // 同级别上一标签
$("#id").prevAll()  // 同级别上所有标签
$("#id").prevUntil("#i2")  // 同级别上到id为i2的标签
// 查找父标签
$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil() 
// 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)