Python100天学习笔记Day27 jQuery

Posted Vax_Loves_1314

tags:

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

使用jQuery

jQuery概述

  1. Write Less Do More(用更少的代码来完成更多的工作)
  2. 使用CSS选择器来查找元素(更简单更方便)
  3. 使用jQuery方法来操作元素(解决浏览器兼容性问题、应用于所有元素并施加多个方法)

引入jQuery

  • 下载jQuery的开发版和压缩版
  • 从CDN加载jQuery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    window.jQuery || 
        document.write('<script src="js/jquery-3.3.1.min.js"></script>')
</script>

查找元素

  • 选择器
    • * / element / #id / .class / selector1, selector2
    • ancestor descendant / parent>child / previous+next / previous~siblings
  • 筛选器
    • 基本筛选器::not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
    • 内容筛选器::contains(’…’) / :empty / :parent / :has(selector)
    • 可见性筛选器::hidden / :visible
    • 子节点筛选器::nth-child(expr) / :first-child / :last-child / :only-child
    • 属性筛选器:[attribute] / [attribute=‘value’] / [attribute!=‘value’] / [attribute^=‘value’] / [attribute$=‘value’] / [attribute|=‘value’] / [attribute~=‘value’]
  • 表单::input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

执行操作

  • 内容操作
    • 获取/修改内容:html() / text() / replaceWith() / remove()
    • 获取/设置元素:before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
    • 获取/修改属性:attr() / removeAttr() / addClass() / removeClass() / css()
    • 获取/设置表单值:val()
  • 查找操作
    • 查找方法:find() / parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()
    • 筛选器:filter() / not() / has() / is() / contains()
    • 索引编号:eq()
  • 尺寸和位置
    • 尺寸相关:height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()
    • 位置相关:offset() / position() / scrollLeft() / scrollTop()
  • 特效和动画
    • 基本动画:show() / hide() / toggle()
    • 消失出现:fadeIn() / fadeOut() / fadeTo() / fadeToggle()
    • 滑动效果:slideDown() / slideUp() / slideToggle()
    • 自定义:delay() / stop() / animate()
  • 事件
    • 文档加载:ready() / load()
    • 用户交互:on() / off()

链式操作

检测页面是否可用

<script>
    $(document).ready(function() 
        
    );
</script>
<script>
    $(function() 
        
    );
</script>

jQuery插件

  • jQuery Validation
  • jQuery Treeview
  • jQuery Autocomplete
  • jQuery UI

避免和其他库的冲突

先引入其他库再引入jQuery的情况。

<script src="other.js"></script>
<script src="jquery.js"></script>
<script>
	jQuery.noConflict();
    jQuery(function() 
        jQuery('div').hide();
    );
</script>

先引入jQuery再引入其他库的情况。

<script src="jquery.js"></script>
<script src="other.js"></script>
<script>
    jQuery(function() 
        jQuery('div').hide();
    );
</script>

使用Ajax

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  • 原生的Ajax
  • 基于jQuery的Ajax
    • 加载内容
    • 提交表单

以上是关于Python100天学习笔记Day27 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

Python全栈100天学习笔记Day33Linux实用程序

Python100天学习笔记Day23 CSS渲染页面

Python100天学习笔记Day24 JS基本语法

Python100天学习笔记Day25 JS面向对象及DOM

Python100天学习笔记Day22 Web学习-Html标签

Python100天学习笔记Day22 Web学习-Html标签