python学习-Day44-jQuery

2022/5/3 1:13:05

编程Tag： jQuery 事件 标签 动画 function class python day44

本文主要是介绍python学习-Day44-jQuery，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • jQuery
    • 作业讲解
      • 前情提要
      • 代码
      • 补充
    • jQuery操作标签
      • 文本值操作
      • 属性操作
      • 文档处理
    • 事件操作
      • 克隆操作
      • 悬浮事件
      • 值监听事件
        • 分析
      • 阻止后续事件
      • 事件冒泡
      • 事件委托
    • jQuery动画
      • 显示与隐藏
      • 滑动式动画
      • 淡入淡出效果
      • animate
        • 语法一：
        • 语法二：
        • 通过animate()方法实现动画效果，但不支持以下CSS样式属性:
    • 前端框架 —— bootstrap框架
      • 布局容器
      • 栅格系统
      • 表格样式
      • 表单样式
      • 按钮与图片
      • 图标样式
      • 总结

image

jQuery

作业讲解

前情提要

"""
1.一定要明确目前的标签到底是什么对象
	如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
	如果是jQuery查找出来的对象 那么只能调用jQuery对象方法

2.原生js对象与jQuery对象的关系(**)
	可以将jQuery对象看成是数组包了标签对象
	原生js对象就是标签对象
		eg:
			['jason', ]
			'jason'
	$('#d1')[0]  // jQuery对象转原生js对象
	$(标签对象)   // 原生js对象转jQuery对象
"""

代码

<script>
        // let startBtn = $('#d2')[0];
        let startBtn = document.getElementById('d2')
        let stopEle = document.getElementById('d3')
        let inputEle = document.getElementById('d1')
        // 4.专门定义一个展示时间的函数
        function showTime(){
            // 2.获取当前时间对象
            let cTimeObj = new Date()
            // 3.添加到input标签value属性中
            inputEle.value = cTimeObj.toLocaleString()
        }

        // 6.定义一个存储定时器对象的全局变量(多个函数都要用)
        let timeObj = null;
        // 1.先给开始按钮绑定一个点击事件
        startBtn.onclick = function () {
            // 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
            if(!timeObj){
                // 5.循环定时任务
                timeObj = setInterval(showTime, 1000)  // 如果起了多个任务 变量只能指向最后一个
            }
        }

        // 7.给停止按钮绑定一个取消定时器的点击事件
        stopEle.onclick = function () {
            clearInterval(timeObj)  // 移除任务 并不会清空变量的值
            // 清空变量的值
            timeObj = null
        }
</script>

补充

原生js代码查找标签绑定的变量名推荐使用  xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle

image

jQuery操作标签

'''语法上肯定比js简洁'''
# class操作
 jQuery操作					DOM操作
addClass()					classList.add()
removeClass()					classList.remove()
hasClass()					classList.contains()
toggleClass()					classList.toggle()

# 样式操作
$divEle.css('border','5px solid black')

# 位置操作
$(window).scrollTop()  获取左侧滚动条距离顶端的位移量
"""
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
"""

文本值操作

jQuery						DOM
text()						innerText
html() 						innerHTML
val()						value
转js对象						files
'''不写值就是获取 写了就是设置'''

属性操作

$('div').attr('style')  # 获取第一个标签的style属性值
$('div').attr('class','c1')  # 批量设置单个
$('div').attr({'name':'jason','pwd':123})  # 批量设置多个
$('div').removeAttr('class')  # 批量移除

"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
	prop('checked')		  	 结果是布尔值
	prop('checked',false)  动态设置
"""

文档处理

# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()

image

事件操作

'''js绑定'''
	标签对象.onclick = function(){}
  标签对象.onchange = function(){}
  ...
'''jQuery绑定'''
	jQuery对象.click(function(){})
  jQuery对象.change(function(){})
  ...

克隆操作

$(选择器).clone();
1.clone()：克隆匹配的DOM元素
2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

悬浮事件

$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
  function () {alert(123)},  # 悬浮触发
	function () {alert(123)}  # 移走触发
)

值监听事件

//jQuery第一种监听事件方法
　　　　$("#helloBtn").click(function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第二种监听事件方法
　　　　$("#helloBtn").bind("click"，function() {
　　　　　　alert("Hello world!");
　　　　});
//jQuery第三种监听事件方法
　　　　$("#helloBtn").on("click"，function() {
　　　　　　alert("Hello world!");
　　　　})；
//jQuery第四种监听事件方法
　　　　$("body").on({
　　　　　　click: function() {
　　　　　　　　alert("Hello world!");
　　　　　　}
　　　　}, "button");
//jQuery第五种监听事件方法
　　　　$("body").on("click", "button", function() {
　　　　　　alert("Hello world!");
　　　　});
　　});



<body>
<button id="helloBtn">Hello</button>
</body>

分析

（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。

（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件
监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。

（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。

（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。

阻止后续事件

"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
1.方式1(推荐使用)
	$('#d1').click(function () {
     alert(123)
     return false   #  取消当前标签对象后续事件的执行
    })
2.方式2(自带关键字)
	$('#d1').click(function (e) {
            alert(123)
            e.preventDefault()
    })

事件冒泡

"""
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
"""
方式1
	return false
方式2
	e.stopPropagation()

事件委托

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
$('body').on('事件类型','选择器',function(){})

# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

jQuery动画

显示与隐藏

// show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下：

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。

  easing:用来指定切换效果，默认是"swing",可用参数"inear"。

  fn:在动画完成时执行的函数，每个元素执行一次。

$("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
$("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
$("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

滑动式动画

// slidUp()和slideDown()方法通过改变高度值实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画数值。

  easing:用来指定切换效果，默认是"swing",可用参数·"inear".

  fn:在动画完成时执行的函数，每个元素执行一次。

淡入淡出效果

// fadeln()和fadeOut()方法通过改变透明度实现动画效果。具体语法如下：

$element.slidUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

  speed:三种预定速度之一的字符串（"show","normal"或者"fast")或表示动画时长的毫秒数值。

  easing:用来指定切换效果，默认是"swing",可用参数"inear".

  fn:在动画完成时执行的函数，每个元素执行一次。

animate

语法一：

// jQuery提供了animate()方法完成自定义动画效果

$element.animate(styles,speed,easing,callback)

styles  // 代表动画属性和最终值的样式属性以及属性值的集合{属性:属性值,属性:属性值}
speed  // 可选。规定动画的速度。默认是 "normal"。(毫秒 （比如 1500）"slow" "normal" "fast")
easing  // 可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback  // 可选。animate 函数执行完之后，要执行的函数。

$("div").animate( {width:"1000px"},5000,function(){alert("调整完成")})

语法二：

$element.animate(styles,options)

styles  // 必需。规定产生动画效果的 CSS 样式和值（同上）。

options  // 可选。规定动画的额外选项。
          // 可能的值：
          speed - 设置动画的速度
          easing - 规定要使用的 easing 函数
          callback - 规定动画完成之后要执行的函数
          step - 规定动画的每一步完成之后要执行的函数
          queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
          specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

通过animate()方法实现动画效果，但不支持以下CSS样式属性:

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor

image

前端框架 —— bootstrap框架

# bootstrap框架
	内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可

# bootstrap版本
	推荐使用v3版本

# 基本使用
	必须先导入后使用
  	1.本地导入
    2.cdn导入
    	bootcdn
 	bootstrap需要使用jQuery来实现动态效果
 
# 文件组成
	bootstrap需要导入两个文件
  	一个是css文件
    一个是js文件
  
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""

布局容器

class = 'container'  					两边有留白
class = 'container-fluid'			没有留白

栅格系统

class = 'row'  默认开设一行均分12份
class = 'col-md-n'  指定需要几份(电脑屏幕)
	# 栅格参数可以做到响应式布局xs sm md lg...

如果一行十二份用不完 可以调整位置
	col-md-offset-3

表格样式

参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"

表单样式

.pull-left			左浮
.pull-right			右浮

class='form-control'
针对radio和checkbox不能加!!!

按钮与图片

# 按钮样式
class = 'btn'
# 按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
# 按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>

图标样式

<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/

总结

尤其是前端框架  几乎都是直接看官网拷贝样式即可

image



这篇关于python学习-Day44-jQuery的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程