jQuery基础

2022-05-26 01:00:47 阅读：146 来源： 互联网

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();// 兄弟们(同级别上下所有标签)

标签：jQuery,标签,基础,li,ul,选择器,id
来源： https://www.cnblogs.com/zq0408/p/16311605.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9