逆袭之路——python 前端开发之jQuery操作标签、事件操作、牛逼框架 Bootstrap【day44】

最新推荐文章于 2022-10-07 11:32:46 发布

絵飛·的魚

最新推荐文章于 2022-10-07 11:32:46 发布

阅读量1.7k

点赞数

文章标签： jquery bootstrap 前端

本文链接：https://blog.csdn.net/weixin_46349820/article/details/124543212

版权

今日内容概要

计时器作业
jQuery操作标签
jQuery事件操作
jQuery动画效果(了解)
前端第三方框架Bootstrap(基础)

今日内容详细

一、计时器作业

"""
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

二、 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()

五、事件操作

	'''js绑定'''
		标签对象.onclick = function(){}
	  标签对象.onchange = function(){}
	  ...
	'''jQuery绑定'''
		jQuery对象.click(function(){})
	  jQuery对象.change(function(){})
	  ...
	 
	# 克隆操作
		<button id="d1">是兄弟就来砍我!!!</button>
	  <script>
	        $('#d1').click(function () {
	        $('body').append($(this).clone())  // 不克隆事件
	        $('body').append($(this).clone(true))  // 克隆事件
	        })
	  </script>

六、悬浮事件

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

七、值监听事件

	"""
	jQuery绑定事件有两种方式
		$('#d1').click(function(){})
		$('#d1').on('click',function(){})
	有时候第一种绑定事件的方式无法生效 那么就使用第二种
	"""
	<input type="text" id="d1">
	<script>
	    $('#d1').on('input',function () {
	        console.log($(this).val())
	    })
	</script>

八、阻止后续事件

	"""
	如果给已经有事件的标签绑定事件 那么会依次执行
	如果想要取消后续时间的执行 可以使用两种方式阻止
	"""
	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(){})

十一、动画效果

	hide
	show
	slideUp
	slideDown
	fadeIn
	fadeOut
	animate

十二、前端框架牛逼王王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

十五、表格样式

参考官网，直接cv即可

	# 表格样式
	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>      #sm 小
	<a href="" class="btn btn-success btn-lg">言多必失</a>      #lg 中
	<a href="" class="btn btn-success btn-block">言多必失</a>   #block 大

十八、图标样式

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

请添加图片描述

絵飛·的魚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
逆袭之路——python 前端开发之jQuery操作标签、事件操作、牛逼框架 Bootstrap【day44】

今日内容概要计时器作业jQuery操作标签jQuery事件操作jQuery动画效果(了解)前端第三方框架Bootstrap(基础)今日内容详细一、计时器作业"""1.一定要明确你手上的标签到底是什么对象如果是原生js代码查找出来的对象那么只能调用原生js的对象方法如果是jQuery查找出来的对象那么只能调用jQuery对象方法2.原生js对象与jQuery对象的关系(**) 可以将jQuery对象看成是数组包了标签对象原生js对象就是标签对象 eg:
复制链接

扫一扫