内容概要

  • jQuery操作标签

  • jQuery绑定事件

  • jQuery补充知识点

  • jQuery动画效果(了解)

  • 零散补充

内容详细

jQuery练习题

  1. $('#i1')
  2. r.fn.init [div#i1.container]
  3.  
  4. $('h2')
  5. r.fn.init [h2, prevObject: r.fn.init(1)]

  6. $('input')
  7. r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
  8.  
  9. $('.c1')
  10. r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]

  11. $('.btn-default')
  12. r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
  13.  
  14. $('.c1,h2')
  15. r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]

  16. $('.c1,#p3')
  17. r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
  18.  
  19. $('.c1,.btn')
  20. r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
  21.  
  22. $('form').find('input')
  23. r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
  24.  
  25. $('label input')
  26. r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
  27.  
  28. $('label+input')
  29. r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
  30.  
  31. $('#p2~li')
  32. r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]

  33. $('#f1 input:first')
  34. r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
  35.  
  36. $('#my-checkbox input:last')
  37. r.fn.init [input, prevObject: r.fn.init(1)]

  38. $('#my-checkbox input[checked!="checked"]')
  39. r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)

  40. $('label:has("input")')
  41. r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]

操作标签

  1. # 操作类
  2. """
  3. js版本 jQuery版本
  4. classList.add() addClass()
  5. classList.remove() removeClass()
  6. classList.contains() hasClass()
  7. classList.toggle() toggleClass()
  8. """

  9. # css操作
  10. <p>111</p>
  11. <p>222</p>
  12. """一行代码将第一个p标签变成红色第二个p标签变成绿色"""
  13. $('p').first().css('color','red').next().css('color','green')
  14. # jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
  15. # jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
  16. class MyClass(object):
  17. def func1(self):
  18. print('func1')
  19. return self

  20. def func2(self):
  21. print('func2')
  22. return self
  23. obj = MyClass()
  24. obj.func1().func2()

  25. # 位置操作
  26. offset() # 相对于浏览器窗口
  27. position() # 相对于父标签

  28. scrollTop() # 需要了解
  29. $(window).scrollTop()
  30. 0
  31. $(window).scrollTop()
  32. 969
  33. $(window).scrollTop() # 括号内不加参数就是获取
  34. 1733
  35. $(window).scrollTop(0) # 加了参数就是设置
  36. n.fn.init [Window]
  37. $(window).scrollTop(500)
  38. n.fn.init [Window]
  39. scrollLeft()

  40. # 尺寸
  41. $('p').height() # 文本
  42. 20
  43. $('p').width()
  44. 1670
  45. $('p').innerHeight() # 文本+padding
  46. 26
  47. $('p').innerWidth()
  48. 1674
  49. $('p').outerHeight() # 文本+padding+border
  50. 26
  51. $('p').outerWidth()
  52. 1674


  53. # 文本操作
  54. """
  55. 操作标签内部文本
  56. js jQuery
  57. innerText text() 括号内不加参数就是获取加了就是设置
  58. innerHTML html()

  59. $('div').text()
  60. "
  61.  
  62. 有些话听听就过去了,不要在意,都是成年人!
  63.  
  64. "
  65. $('div').html()
  66. "
  67. <p>
  68. 有些话听听就过去了,不要在意,都是成年人!
  69. </p>
  70. "
  71. $('div').text('你们都是我的大宝贝')
  72. w.fn.init [div, prevObject: w.fn.init(1)]
  73. $('div').html('你个臭妹妹')
  74. w.fn.init [div, prevObject: w.fn.init(1)]
  75. $('div').text('<h1>你们都是我的大宝贝</h1>')
  76. w.fn.init [div, prevObject: w.fn.init(1)]
  77. $('div').html('<h1>你个臭妹妹</h1>')
  78. w.fn.init [div, prevObject: w.fn.init(1)]
  79. """
  80. # 获取值操作
  81. """
  82. js jQuery
  83. .value .val()
  84. """
  85. $('#d1').val()
  86. "sasdasdsadsadad"
  87. $('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置

  88. w.fn.init [input#d1]
  89. $('#d2').val()
  90. "C:\fakepath\01_测试路由.png"
  91. $('#d2')[0].files[0] # 牢记两个对象之间的转换
  92. File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
  93.  
  94. # 属性操作
  95. """
  96. js中 jQuery
  97. setAttribute() attr(name,value)
  98. getAttribute() attr(name)
  99. removeAttribute() removeAttr(name)

  100. 在用变量存储对象的时候 js中推荐使用
  101. XXXEle 标签对象
  102. jQuery中推荐使用
  103. $XXXEle jQuery对象
  104. """
  105. let $pEle = $('p')
  106. undefined
  107. $pEle.attr('id')
  108. "d1"
  109. $pEle.attr('class')
  110. undefined
  111. $pEle.attr('class','c1')
  112. w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
  113. $pEle.attr('id','id666')
  114. w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
  115. $pEle.attr('password','jason123')
  116. w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
  117. $pEle.removeAttr('password')
  118. w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
  119.  
  120. """
  121. 对于标签上有的能够看到的属性和自定义属性用attr
  122. 对于返回布尔值比如checkbox radio option是否被选中用prop
  123. """
  124.  
  125. $('#d3').attr('checked')
  126. "checked"
  127. $('#d2').attr('checked')
  128. undefined
  129. $('#d2').attr('checked')
  130. undefined
  131. $('#d4').attr('checked')
  132. undefined
  133. $('#d3').attr('checked')
  134. "checked"
  135. $('#d3').attr('checked','checked') # 无效
  136. w.fn.init [input#d3]
  137.  
  138. $('#d2').prop('checked')
  139. false
  140. $('#d2').prop('checked')
  141. true
  142. $('#d3').prop('checked',true)
  143. w.fn.init [input#d3]
  144. $('#d3').prop('checked',false)
  145. w.fn.init [input#d3]
  146.  
  147. # 文档处理
  148. """
  149. js jQuery
  150. createElement('p') $('<p>')
  151. appendChild() append()

  152. """
  153. let $pEle = $('<p>')
  154. $pEle.text('你好啊 草莓要不要来几个?')
  155. $pEle.attr('id','d1')
  156. $('#d1').append($pEle) # 内部尾部追加
  157. $('#d1').append($pEle[0]) # 内部尾部追加
  158. $pEle.appendTo($('#d1'))
  159.  
  160. $('#d1').prepend($pEle) # 内部头部追加
  161. w.fn.init [div#d1]
  162. $pEle.prependTo($('#d1'))
  163. w.fn.init [p#d1, prevObject: w.fn.init(1)]
  164.  
  165. $('#d2').after($pEle) # 放在某个标签后面
  166. w.fn.init [p#d2]
  167. $pEle.insertAfter($('#d1'))
  168.  
  169. $('#d1').before($pEle)
  170. w.fn.init [div#d1]
  171. $pEle.insertBefore($('#d2'))

  172. $('#d1').remove() # 将标签从DOM树中删除
  173. w.fn.init [div#d1]
  174.  
  175. $('#d1').empty() # 清空标签内部所有的内容
  176. w.fn.init [div#d1]

事件

  1. // 第一种
  2. $('#d1').click(function () {
  3. alert('别说话 吻我')
  4. });
  5.  
  6. // 第二种(功能更加强大 还支持事件委托)
  7. $('#d2').on('click',function () {
  8. alert('借我钱买草莓 后面还你')
  9. })

克隆事件

  1. <button id="d1">屠龙宝刀,点击就送</button>

  2. <script>
  3. $('#d1').on('click',function () {
  4. // console.log(this) // this指代是当前被操作的标签对象
  5. // $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件
  6. $(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件

  7. })
  8. </script>

左侧菜单

  1. <script>
  2. $('.title').click(function () {
  3. // 先给所有的items加hide
  4. $('.items').addClass('hide')
  5. // 然后将被点击标签内部的hide移除
  6. $(this).children().removeClass('hide')
  7. })
  8. </script>

返回顶部

  1. <script>
  2. $(window).scroll(function () {
  3. if($(window).scrollTop() > 300){
  4. $('#d1').removeClass('hide')
  5. }else{
  6. $('#d1').addClass('hide')
  7. }
  8. })
  9. </script>

自定义登陆校验

  1. # 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
  2. <p>username:
  3. <input type="text" id="username">
  4. <span style="color: red"></span>
  5. </p>
  6. <p>password:
  7. <input type="text" id="password">
  8. <span style="color: red"></span>
  9. </p>
  10. <button id="d1">提交</button>
  11.  
  12. <script>
  13. let $userName = $('#username')
  14. let $passWord = $('#password')
  15. $('#d1').click(function () {
  16. // 获取用户输入的用户名和密码 做校验
  17. let userName = $userName.val()
  18. let passWord = $passWord.val()
  19. if (!userName){
  20. $userName.next().text("用户名不能为空")
  21. }
  22. if (!passWord){
  23. $passWord.next().text('密码不能为空')
  24. }
  25. })
  26. $('input').focus(function () {
  27. $(this).next().text('')
  28. })
  29. </script>

input实时监控

  1. <input type="text" id="d1">
  2.  
  3. <script>
  4. $('#d1').on('input',function () {
  5. console.log(this.value)
  6. })
  7. </script>

hover事件

  1. <script>
  2. // $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
  3. // alert(123)
  4. // })
  5.  
  6. $('#d1').hover(
  7. function () {
  8. alert('我来了') // 悬浮
  9. },
  10. function () {
  11. alert('我溜了') // 移开
  12. }
  13. )
  14. </script>

键盘按键按下事件

  1. <script>
  2. $(window).keydown(function (event) {
  3. console.log(event.keyCode)
  4. if (event.keyCode === 16){
  5. alert('你按了shift键')
  6. }
  7. })
  8. </script>

补充

阻止后续事件执行

  1. <script>
  2. $('#d2').click(function (e) {
  3. $('#d1').text('宝贝 你能看到我吗?')
  4. // 阻止标签后续事件的执行 方式1
  5. // return false
  6. // 阻止标签后续事件的执行 方式2
  7. // e.preventDefault()
  8. })
  9. </script>

阻止事件冒泡

  1. <script>
  2. $('#d1').click(function () {
  3. alert('div')
  4. })
  5. $('#d2').click(function () {
  6. alert('p')
  7. })
  8. $('#d3').click(function (e) {
  9. alert('span')
  10. // 阻止事件冒泡的方式1
  11. // return false
  12. // 阻止事件冒泡的方式2
  13. // e.stopPropagation()
  14. })
  15. </script>

事件委托

  1. <button>是兄弟,就来砍我!!!</button>
  2.  
  3. <script>
  4. // 给页面上所有的button标签绑定点击事件
  5. // $('button').click(function () { // 无法影响到动态创建的标签
  6. // alert(123)
  7. // })
  8.  
  9. // 事件委托
  10. $('body').on('click','button',function () {
  11. alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
  12. })
  13. </script>

页面加载

  1. # 等待页面加载完毕再执行代码
  2. window.onload = function(){
  3. // js代码
  4. }
  5.  
  6. """jQuery中等待页面加载完毕"""
  7. # 第一种
  8. $(document).ready(function(){
  9. // js代码
  10. })
  11. # 第二种
  12. $(function(){
  13. // js代码
  14. })
  15. # 第三种
  16. """直接写在body内部最下方"""

动画效果

  1. $('#d1').hide(5000)
  2. w.fn.init [div#d1]
  3. $('#d1').show(5000)
  4. w.fn.init [div#d1]
  5. $('#d1').slideUp(5000)
  6. w.fn.init [div#d1]
  7. $('#d1').slideDown(5000)
  8. w.fn.init [div#d1]
  9. $('#d1').fadeOut(5000)
  10. w.fn.init [div#d1]
  11. $('#d1').fadeIn(5000)
  12. w.fn.init [div#d1]
  13. $('#d1').fadeTo(5000,0.4)
  14. w.fn.init [div#d1]

补充

  1. # each()
  2. # 第一种方式
  3. $('div')
  4. w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
  5. $('div').each(function(index){console.log(index)})
  6. VM181:1 0
  7. VM181:1 1
  8. VM181:1 2
  9. VM181:1 3
  10. VM181:1 4
  11. VM181:1 5
  12. VM181:1 6
  13. VM181:1 7
  14. VM181:1 8
  15. VM181:1 9

  16. $('div').each(function(index,obj){console.log(index,obj)})
  17. VM243:1 0 <div>1•</div>•
  18. VM243:1 1 <div>2•</div>•
  19. VM243:1 2 <div>3•</div>•
  20. VM243:1 3 <div>4•</div>•
  21. VM243:1 4 <div>5•</div>•
  22. VM243:1 5 <div>6•</div>•
  23. VM243:1 6 <div>7•</div>•
  24. VM243:1 7 <div>8•</div>•
  25. VM243:1 8 <div>9•</div>•
  26. VM243:1 9 <div>10•</div>•

  27. # 第二种方式
  28. $.each([111,222,333],function(index,obj){console.log(index,obj)})
  29. VM484:1 0 111
  30. VM484:1 1 222
  31. VM484:1 2 333
  32. (3) [111, 222, 333]
  33. """
  34. 有了each之后 就无需自己写for循环了 用它更加的方便
  35. """
  36. # data()
  37. """
  38. 能够让标签帮我们存储数据 并且用户肉眼看不见
  39. """
  40. $('div').data('info','回来吧,我原谅你了!')
  41. w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
  42.  
  43. $('div').first().data('info')
  44. "回来吧,我原谅你了!"
  45. $('div').last().data('info')
  46. "回来吧,我原谅你了!"
  47.  
  48. $('div').first().data('xxx')
  49. undefined
  50. $('div').first().removeData('info')
  51. w.fn.init [div#d1, prevObject: w.fn.init(10)]
  52.  
  53. $('div').first().data('info')
  54. undefined
  55. $('div').last().data('info')
  56. "回来吧,我原谅你了!"

09:jQuery(02)的更多相关文章

  1. Python开发【第十三篇】:jQuery(二)

    http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展   ...

  2. 前端开发:JQuery(2)& Bootstrap

    JS事件流 事件的概念:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 事件流: ...

  3. 前端开发:JQuery(1)

    JQuery DOM文档加载的步骤: 1. 解析HTML结构: 2. 加载外部脚本和样式: 3. 解析并执行脚本代码: 4. DOM树构建完成: 5. 加载图片等外部文件: 6. 页面加载完成: JS ...

  4. 06:JS(02)

    对象 一切皆对象 数组(类似于python里面的列表) [] var l = [11,22,33,44,55] typeof l "object" var l1 = [11,'sd ...

  5. spring中BeanPostProcessor之一:InstantiationAwareBeanPostProcessor(02)

    在上篇博客中写道了bean后置处理器InstantiationAwareBeanPostProcessor,只介绍了其中一个方法的作用及用法,现在来看postProcessBeforeInstanti ...

  6. 08:jQuery(01)

    今日内容概要 jQuery(封装了js的前端框架(模块)) 很容易与DOM操作混淆 jQuery """ jQuery内部封装了原生的js代码(还额外添加了很多的功能) ...

  7. 04:CSS(02)

    溢出属性 p { height: 100px; width: 50px; border: 3px solid red; /*overflow: visible; !*默认就是可见 溢出还是展示*!*/ ...

  8. hadoop系列:zookeeper(2)——zookeeper核心原理(选举)

    1.前述 上篇文章<hadoop系列:zookeeper(1)--zookeeper单点和集群安装>(http://blog.csdn.net/yinwenjie/article/deta ...

  9. iOS开发Swift篇(02) NSThread线程相关简单说明

    iOS开发Swift篇(02) NSThread线程相关简单说明 一 说明 1)关于多线程部分的理论知识和OC实现,在之前的博文中已经写明,所以这里不再说明. 2)该文仅仅简单讲解NSThread在s ...

随机推荐

  1. 【DB宝51】CentOS7修改网卡名称

    目录 1.修改/etc/default/grub文件 2.修改/etc/udev/rules.d/70-persistent-net.rules文件 3.修改网卡配置文件 4.重启服务器 需求:原来的 ...

  2. 获取InputStream对象的方法

    获取InputStream对象的方法 getResourceAsStream(String path) 默认path路径位于Class所在Module的src目录下 . InputStream is ...

  3. android 文件存储&SharedPreferences

    一.文件存储 文件存储主要是I/O流的操作,没什么好说的,需要注意的是保存文件的各个目录. 下面为常用的目录: public static File getInFileDir(Context cont ...

  4. 技术博客:Azure Functions + Azure Storage 开发

    Azure GitHub wiki 同步发布 传送门 Azure Functions 通过 Functions(一个事件驱动型无服务器计算平台,还可以解决复杂的业务流程问题)更加高效地进行开发.在本地 ...

  5. SE_Work4_软件案例分析

    项目 内容 课程:北航-2020-春-软件工程 博客园班级博客 要求:分析软件案例 个人博客作业-软件案例分析 班级 005 这个作业在哪个具体方面帮助我实现目标 分析对比一类软件,学会规划分析软件的 ...

  6. queryset惰性与缓存

    https://blog.csdn.net/zhu6201976/article/details/83550461

  7. Let's go!

    第一次开通博客 心情还是很激动的,而且做出了这么好看的页面虽然都是用的别人的组件,自己不是很知道原理但是也很开心,以后会将自己学习的东西写成笔记发在上面

  8. [DB] 关系型数据库

    名词 数据库(database):保存有组织的数据的容器,是通过DBMS创建的容器 表(table):某种特定类型数据的结构化清单 元组(tuple):行,一条数据库记录,对应一个事物 属性(prop ...

  9. [Java] 静态代理 动态代理

    原理 静态代理=代理模式 动态代理=代理模式+反射 代理模式可以在不修改被代理对象的基础上,通过扩展代理类,进行一些功能的附加与增强 代理类和被代理类应该共同实现一个接口,或者是共同继承某个类 静态代 ...

  10. 查阅日志文件:有时候报错信息只是给出了问题的表面现象,要想更深入的了解问题,必须查看相应的日志文件,而日志文件又分为系统日志文件(/var/log)和应用的日志文件,结合这两个日志文件,一般就能定位问题所在。

    作为一名合格的 Linux 运维工程师,一定要有一套清晰.明确的解决故障思路,当问题出现时,才能迅速定位.解决问题,这里给出一个处理问题的一般思路: 重视报错提示信息:每个错误的出现,都是给出错误提示 ...