【2020Python修炼记】前端开发之 jQuery基础+选择器

584 0 0

作者:bigorangecc

【目录】

一、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')

3、如何查找标签

（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)]

（3）基本筛选器 —— 标签：筛选条件

(对获取的标签对象，进行二次筛选（冒号后面的为筛选条件）)

$('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)]

（4）属性选择器——$('[属性名]') / $('[属性名="属性值"]')

$('[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)]

（5）表单筛选器——主要针对form表单【简写】$(':属性名')

$('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)]

（6）筛选器方法—— 选择器 . 方法 ()

$('#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)]

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/bigorangecc/p/12915772.html

标签： jQuery jQuery插件 jQuery教程

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

【2020Python修炼记】前端开发之 jQuery基础+选择器

【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文件）

如何解决多个文件反复书写引入语句的代码？

可以借助于 pycharm 软件的自动初始化代码功能完成自动添加（生成模板文件）
【配置】——【编辑】——【file and code template】

"""我不想下载jQuery文件能不能使用呢？请见方法2 """

# 方法2：直接引入jQuery提供的CDN服务(基于网络直接请求加载)
（CDN:内容分发网络。CDN有免费的也有收费的。前端免费的cdn网站: bootcdn ）

在html代码的<body>部分，加入以下代码：

"""此方法的前提：你的计算机必须要有网络"""

3、如何查找标签

（1）基本选择器 —— $('#id') / $(' . 类') / $('标签名')—— 注意：括号内不要少了单引号

（2）组合选择器/分组与嵌套

（3）基本筛选器 —— 标签：筛选条件

(对获取的标签对象，进行二次筛选（冒号后面的为筛选条件）)

（4）属性选择器——$('[属性名]') / $('[属性名="属性值"]')

（5）表单筛选器——主要针对form表单【简写】$(':属性名')

（6）筛选器方法—— 选择器 . 方法 ()

相关课程

热门标签

【2020Python修炼记】前端开发之 jQuery基础+选择器

【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文件）

如何解决多个文件反复书写引入语句的代码？

可以借助于 pycharm 软件的自动初始化代码功能完成自动添加（生成模板文件）【配置】——【编辑】——【file and code template】

"""我不想下载jQuery文件 能不能使用呢？请见方法2 """# 方法2： 直接引入jQuery提供的CDN服务(基于网络直接请求加载)（CDN:内容分发网络。CDN有免费的也有收费的。前端免费的cdn网站: bootcdn ）

在html代码的<body>部分，加入以下代码：

"""此方法的前提：你的计算机必须要有网络"""

3、如何查找标签

（1）基本选择器 —— $('#id') / $(' . 类') / $('标签名')—— 注意：括号内不要少了 单引号

（2）组合选择器/分组与嵌套

（3）基本筛选器 —— 标签：筛选条件

(对获取的标签对象，进行二次筛选（冒号后面的为筛选条件）)

（4）属性选择器——$('[属性名]') / $('[属性名="属性值"]')

（5）表单筛选器——主要针对form表单 【简写】$(':属性名')

（6）筛选器方法—— 选择器 . 方法 ()

相关课程

热门标签

推荐文章

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

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

jQuery的宗旨
write less do more

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

# 方法 1：文件下载到本地，在html代码的<body>部分，使用<script> 的src属性引入（即外联式引入js文件）

可以借助于 pycharm 软件的自动初始化代码功能完成自动添加（生成模板文件）
【配置】——【编辑】——【file and code template】

"""我不想下载jQuery文件能不能使用呢？请见方法2 """

# 方法2：直接引入jQuery提供的CDN服务(基于网络直接请求加载)
（CDN:内容分发网络。CDN有免费的也有收费的。前端免费的cdn网站: bootcdn ）

（1）基本选择器 —— $('#id') / $(' . 类') / $('标签名')—— 注意：括号内不要少了单引号

（5）表单筛选器——主要针对form表单【简写】$(':属性名')