jQuery1

Posted bailongcaptain

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery1相关的知识,希望对你有一定的参考价值。

什么是jQuery

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

jQuery的优点

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
更少的代码完成更多的事情

学习步骤

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

jQuery的导入问题

  • 文件下载到本地的导入方式

可以借助于pycharm自动初始化代码功能完成自动添加
配置
  编辑
     file and code template
  • 直接引入jQuery的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() === $()
ps:相对js的代码jQuery的代码非常精简
// 原生js代码操作标签
let pEle = document.getElementById(‘d1‘)
pEle.style.color = ‘red‘
?
// jQuery操作标签
$(‘p‘).css(‘color‘,‘blue‘)

jQuery查找标签

  • 基本选择器

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

以上是关于jQuery1的主要内容,如果未能解决你的问题,请参考以下文章

更新到 jQuery 1.9.1 后 browser.msie 错误

formValidator 不支持jquery1.9以上的解决办法

jQuery1.9+版本的.on使用方法笔记

jquery1.9不支持browser对象的解决方案

jquery1.9以上版本如何使用toggle函数

jquery1.9以上版本如何使用toggle函数