【2020Python修炼记】前端开发之 jQuery基础+选择器
【目录】
一、jQuery 简介
二、jQuery 的基本使用——选择器
一、jQuery 简介
1、介绍
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫 “类库”兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery在使用的时候也需要导入
但是它的文件非常的小(几十KB) 基本不影响网络速度
jQuery的宗旨
write less do more让你用更少的代码完成更多的事情
官网：https://jquery.com/
技术指南：http://jquery.cuishifeng.cn/index.html
2、学习目标
【学习内容】
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)
如何导入jQuery框架文件
# 方法 1： 文件下载到本地 ，在html代码的<body>部分，使用<script> 的src属性 引入（即 外联式引入js文件）
<script src="jquery-3.3.1.min.js"></script> <script> //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作 </script>如何解决多个文件反复书写引入语句的代码？
可以借助于 pycharm 软件的自动初始化代码功能完成自动添加（生成模板文件）
【配置】——【编辑】——【file and code template】
"""我不想下载jQuery文件 能不能使用呢？请见方法2 """
# 方法2： 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
（CDN:内容分发网络。CDN有免费的也有收费的。前端免费的cdn网站: bootcdn ）在html代码的<body>部分，加入以下代码：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""此方法的前提：你的计算机必须要有网络"""
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> code... </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')
如何定义 jQuery 对象？
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。
如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如 $(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0] //jQuery对象转成DOM对象
二、jQuery 的基本使用：如何查找标签——选择器/筛选器
（1）基本选择器 —— $('#id') / $(' . 类') / $('标签名')—— 注意：括号内不要少了 单引号
// 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对象 如何变成标签对象 $('#d1')[0] <div id="d1">…</div> document.getElementById('d1') # 查看是否变为 标签对象（调用 标签对象） <div id="d1">…</div>
// 标签对象如何转jQuery对象 $(document.getElementById('d1')) w.fn.init [div#d1]
（2）
【组合-叠加条件】
$('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)]
【简写】
input 标签属性 :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)]
🐱不负韶华，只争朝夕🍚
