正文

前端知识-jquery(代码片段)

dingbei  dingbei  2023-03-17  757

关键词：

jQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情

复习
	python导入模块发生了哪些事？
		导入模块其实需要消耗资源
	jQuery在使用的时候也需要导入
		但是它的文件非常的小(几十KB) 基本不影响网络速度

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)

版本介绍

jQuery文件下载
	压缩  		容量更小
	未压缩
"""
# jQuery在使用之前 一定要确保已经导入了

1、针对导入问题

# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
	可以借助于pycharm自动初始化代码功能完成自动添加
  	配置
    	编辑
      	file and code template
  """我不想下载jQuery文件 能不能使用呢？"""
  
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
	CDN:内容分发网络
  	CDN有免费的也有收费的
    前端免费的cdn网站:
      	bootcdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  """你的计算机必须要有网络"""
  
  
# jQuery基本语法
	jQuery(选择器).action()
  秉持着jQuery的宗旨 jQuery简写	$
  jQuery()  === $()

# jQuery与js代码对比
	eg:将p标签内部的文本颜色改为红色
   	// 原生js代码操作标签
		let pEle = document.getElementById(‘d1‘)
		pEle.style.color = ‘red‘

		// jQuery操作标签
		$(‘p‘).css(‘color‘,‘blue‘)

2、先学如何查找标签

基本选择器

// id选择器
$(‘#d1‘)
w.fn.init?[div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$(‘.c1‘)
w.fn.init?[p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init?[document]__proto__: Object(0)
// 标签选择器
$(‘span‘)
w.fn.init(3)?[span, span, span, prevObject: w.fn.init(1)]

"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$(‘#d1‘)[0]
<div id=?"d1">?…?</div>?
document.getElementById(‘d1‘)
<div id=?"d1">?…?</div>?
// 标签对象如何转jQuery对象
undefined
$(document.getElementById(‘d1‘))
w.fn.init?[div#d1]

组合选择器/分组与嵌套

$(‘div‘)
w.fn.init(2)?[div#d1, div.c1, prevObject: w.fn.init(1)]
$(‘div.c1‘)
w.fn.init?[div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init?[document]__proto__: Object(0)
$(‘div#d1‘)
w.fn.init?[div#d1, prevObject: w.fn.init(1)]
$(‘*‘)
w.fn.init(19)?[html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
               
$(‘#d1,.c1,p‘)  # 并列+混用
w.fn.init(3)?[div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              
$(‘div span‘)  # 后代
w.fn.init(3)?[span, span, span, prevObject: w.fn.init(1)]
$(‘div>span‘)  # 儿子
w.fn.init(2)?[span, span, prevObject: w.fn.init(1)]
$(‘div+span‘)  # 毗邻
w.fn.init?[span, prevObject: w.fn.init(1)]
$(‘div~span‘)  # 弟弟
w.fn.init(2)?[span, span, prevObject: w.fn.init(1)]

基本筛选器

$(‘ul li‘)
w.fn.init(10)?[li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$(‘ul li:first‘)  # 大儿子 
w.fn.init?[li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init?[document]__proto__: Object(0)
               
$(‘ul li:last‘)  # 小儿子
w.fn.init?[li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init?[document]__proto__: Object(0)
               
$(‘ul li:eq(2)‘)		# 放索引
w.fn.init?[li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init?[document]__proto__: Object(0)
               
$(‘ul li:even‘)  # 偶数索引 0包含在内
w.fn.init(5)?[li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init?[document]__proto__: Object(0)
              
$(‘ul li:odd‘)  # 奇数索引
w.fn.init(5)?[li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init?[document]__proto__: Object(0)
              
$(‘ul li:gt(2)‘)  # 大于索引
w.fn.init(7)?[li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init?[document]__proto__: Object(0)
              
$(‘ul li:lt(2)‘)  # 小于索引
w.fn.init(2)?[li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init?[document]__proto__: Object(0)
              
$(‘ul li:not("#d1")‘)  # 移除满足条件的标签
w.fn.init(9)?[li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$(‘div‘)
w.fn.init(2)?[div, div, prevObject: w.fn.init(1)]
$(‘div:has("p")‘)  # 选取出包含一个或多个标签在内的标签
w.fn.init?[div, prevObject: w.fn.init(1)]

属性选择器

$(‘[username]‘)
w.fn.init(3)?[input, input, p, prevObject: w.fn.init(1)]
$(‘[username="jason"]‘)
w.fn.init?[input, prevObject: w.fn.init(1)]
$(‘p[username="egon"]‘)
w.fn.init?[p, prevObject: w.fn.init(1)]

$(‘[type]‘)
w.fn.init(2)?[input, input, prevObject: w.fn.init(1)]
$(‘[type="text"]‘)
w.fn.init(2)?[input, input, prevObject: w.fn.init(1)]

表单筛选器

$(‘input[type="text"]‘)
w.fn.init?[input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init?[document]__proto__: Object(0)
$(‘input[type="password"]‘)
w.fn.init?[input, prevObject: w.fn.init(1)]

$(‘:text‘)  # 等价于上面第一个
w.fn.init?[input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init?[document]__proto__: Object(0)
$(‘:password‘)  # 等价于上面第二个
w.fn.init?[input, prevObject: w.fn.init(1)]

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(‘:checked‘)  # 它会将checked和selected都拿到
w.fn.init(2)?[input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init?[document]__proto__: Object(0)
$(‘:selected‘)  # 它不会 只拿selected
w.fn.init?[option, prevObject: w.fn.init(1)]
$(‘input:checked‘)  # 自己加一个限制条件
w.fn.init?[input, prevObject: w.fn.init(1)]

筛选器方法

$(‘#d1‘).next()  # 同级别下一个
w.fn.init?[span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init?[span#d1]__proto__: Object(0)
$(‘#d1‘).nextAll()
w.fn.init(5)?[span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init?[span#d1]__proto__: Object(0)
$(‘#d1‘).nextUntil(‘.c1‘)  # 不包括最后一个
w.fn.init(4)?[span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init?[span#d1]__proto__: Object(0)
              
              
$(‘.c1‘).prev()  # 上一个
w.fn.init?[span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init?[span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$(‘.c1‘).prevAll()
w.fn.init(5)?[span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$(‘.c1‘).prevUntil(‘#d2‘)
w.fn.init(2)?[span, span, prevObject: w.fn.init(1)]
              
$(‘#d3‘).parent()  # 第一级父标签
w.fn.init?[p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init?[span#d3]__proto__: Object(0)
$(‘#d3‘).parent().parent()
w.fn.init?[div#d2, prevObject: w.fn.init(1)]
$(‘#d3‘).parent().parent().parent()
w.fn.init?[body, prevObject: w.fn.init(1)]
$(‘#d3‘).parent().parent().parent().parent()
w.fn.init?[html, prevObject: w.fn.init(1)]
$(‘#d3‘).parent().parent().parent().parent().parent()
w.fn.init?[document, prevObject: w.fn.init(1)]
$(‘#d3‘).parent().parent().parent().parent().parent().parent()
w.fn.init?[prevObject: w.fn.init(1)]
$(‘#d3‘).parents()
w.fn.init(4)?[p, div#d2, body, html, prevObject: w.fn.init(1)]
$(‘#d3‘).parentsUntil(‘body‘)
w.fn.init(2)?[p, div#d2, prevObject: w.fn.init(1)]
                           
$(‘#d2‘).children()  # 儿子
              
$(‘#d2‘).siblings()  # 同级别上下所有            
              
$(‘div p‘)
# 等价           
$(‘div‘).find(‘p‘)  # find从某个区域内筛选出想要的标签            
              
"""下述两两等价"""
$(‘div span:first‘)
w.fn.init?[span, prevObject: w.fn.init(1)]
$(‘div span‘).first()
w.fn.init?[span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3)?[span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
                                                                                    
$(‘div span:last‘)
w.fn.init?[span, prevObject: w.fn.init(1)]
$(‘div span‘).last()
                                                                                    
w.fn.init?[span, prevObject: w.fn.init(3)]
$(‘div span:not("#d3")‘)
w.fn.init(2)?[span, span, prevObject: w.fn.init(1)]
$(‘div span‘).not(‘#d3‘)
w.fn.init(2)?[span, span, prevObject: w.fn.init(3)]

前端知识-jquery(代码片段)

...通过书写更少的代码完成js操作类似于python里面的模块在前端模块不叫模块叫“类库”兼容多个浏览器的你在使用jQuery的时候就不需要考虑浏览器兼容问题jQuery的宗旨 writelessdomore 让你用更少的代码完成更多的事情复习 python导入... 查看详情

前端基础五之jquery基础(代码片段)

...：❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的1.jQuery是什么jQuery是JavaScript的一个库ÿ 查看详情

前端基础五之jquery基础(代码片段)

...：❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的1.jQuery是什么jQuery是JavaScript的一个库ÿ 查看详情

前端----jquery操作表单(代码片段)

表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：$(selector).val()//设置值和获取值看如下H... 查看详情

前端基础六之jquery效果(代码片段)

...：❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的一.jQuery效果隐藏、显示、切换，滑动，淡入淡出，以及动画1 查看详情

前端基础六之jquery效果(代码片段)

web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)

Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附详细代码Web前端：Bootstrap最强总结附详细代码JQ... 查看详情

前端基础之jquery(代码片段)

前端知识之jQueryjQuery2006年1月发布的1.0版本目前在市场上,1.x,2.x,3.x.功能的完善在1.x,2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码3.x的时候增加es的新特性以及调整核心代码的结构核心:writeless,domore官网:https://jquery... 查看详情

web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)

前端知识随笔(代码片段)

css水平居中的写法水平居中行内元素: text-align:center块级元素: margin:0autoposition:absolute+left:50%+transform:translateX(-50%)display:flex+justify-content:center垂直居中设置line-height等于heightposition：absolute+top: 查看详情

前端知识(代码片段)

...是展示数据一般都可以使用表格标签)表单标签(重要:获取前端用户数据发送给后端)jason123readegon123dbjtank123hecha...<table><thead> <tr>一个tr就表示一行<th>username</th>加粗文本<td>username</td>正常文查看详情

jquery基础知识(代码片段)

jQuery基础知识目录jQuery基础知识jQuery基本知识jQuery选择器jQuery基本知识1、jQuery：jQuery是一个快速、简洁的JavaScript库(对JavaScript的相关操作进行了封装：遍历HTML文档、操作DOM、事件处理、Ajax)，其设计宗旨是“writeless&#... 查看详情

前端小知识(代码片段)

$CSSbutton里不嵌入a标签disabled效果会不理想css的属性选择器(w3school查看详细)input[type="text"]color:blue;width:100px<inputtype="text"value="属性选择器">$代码编辑器vscodevscode访问git，下载devServer,c 查看详情

前端知识(代码片段)

前端知识web服务的本质：基于B/S网络架构，浏览器和服务端的交互浏览器发送请求，服务端接收请求，服务端响应请求，服务端吧HTML文件内容发给浏览器，浏览器渲染页面发送请求通过OSI网络七层模型：应用层，表示层，会话... 查看详情

前端知识点(代码片段)

存储loaclaStoragesessionStoragecookieloaclaStorage：以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。sessionstorage：关闭页面后即被清空，而localStorage则会一直保存。cookie：cookie是一小段文本信息，伴随着用户请求在web... 查看详情

前端知识之html(代码片段)

HTML介绍目录查看详情

前端知识之css(代码片段)

CSS目录 &nb 查看详情

前端知识点总结（javascript篇）(代码片段)

...JavaScript字符串转化JSONP原理及优缺点XMLHttpRequest事件委托前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）sessionCookieseaJS的用法及原理，依赖加载的原理、初始化、实现等this问题模块化原理（作用域）JavaScript... 查看详情

正文

前端知识-jquery(代码片段)

jQuery

1、针对导入问题

2、 先学如何查找标签

基本选择器

组合选择器/分组与嵌套

基本筛选器

属性选择器

表单筛选器

筛选器方法

前端知识-jquery(代码片段)

前端基础五之jquery基础(代码片段)

前端基础五之jquery基础(代码片段)

前端----jquery操作表单(代码片段)

前端基础六之jquery效果(代码片段)

前端基础六之jquery效果(代码片段)

web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)

前端基础之jquery(代码片段)

web前端：jquery最强总结（每个要点都附带完全案例详细代码！）(代码片段)

前端知识随笔(代码片段)

前端知识(代码片段)

jquery基础知识(代码片段)

前端小知识(代码片段)

前端知识(代码片段)

前端知识点(代码片段)

前端知识之html(代码片段)

前端知识之css(代码片段)

前端知识点总结（javascript篇）(代码片段)

2、先学如何查找标签