首页 > 其他分享 >【2022.8.29】前端开发(6)

【2022.8.29】前端开发(6)

时间:2022-08-29 23:01:58浏览次数:79  
标签:jQuery function 标签 绑定 29 前端开发 事件 2022.8 id

学习内容概要

  • jQuery更多操作(属性、样式、数据值)
  • jQuery绑定事件
  • jQuery简易动画效果
  • Bootstrap页面框架

内容详细

筛选器方法

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象 从而实现链式操作的效果

操作标签

  jQuery操作					JS操作
addClass()					classList.add()
removeClass()				classList.remove()
hasClass()					classList.contains()
toggleClass()				classList.toggle()

.css('样式名','样式值')		style.样式名 = '样式值'

text()						innerText()
html()						innerHTML()
val()						value
[0].files                files

attr()  静态属性			setAttribute() getAttribute()
prop()	动态变换(checked)

append()					append()
prepend()
after()
before()


remove()	移除标签
empty()		清空标签

jQuery绑定事件

JS绑定事件
	标签对象.on事件名 = function(){事件代码}
   		btnEle.onclick = function(){alert(123)}
jQuery绑定事件
	方式1
        jQuery对象.事件名(function(){事件代码})
            $btnEle.click(function(){alter(123)})
	方式2
    	  jQuery对象.on('事件名',function(){事件代码})
        	  $btnEle.on('click',function(){alter(123)})
 	"""
 	有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
 	"""

阻止后续事件

能够触发form表单提交数据动作的标签有两个
	 <input type="submit">
  	 <button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
	我们也可以让标签之前的事件不执行
    	return false
    
$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })

事件冒泡

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
        alert("span");
    	  return false;  		方式1
        e.stopPropagation(); 	方式2
    });

事件委托

"""
创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('你犯困的样子萌萌哒')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap框架

提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入  bootstrap涉及到js的部分需要使用jQuery 

布局容器
栅格系统
全局css样式
组件
	http://www.fontawesome.com.cn/

标签:jQuery,function,标签,绑定,29,前端开发,事件,2022.8,id
From: https://www.cnblogs.com/55wym/p/16637699.html

相关文章

  • 2022-08-29 第二小组 张晟源(JAVA WEB)
    JAVAweb一,软件架构1.c/s架构:客户端/服务器2.b/s架构:浏览器/服务器二,资源分类1.静态资源:所有用户访问后,得到的结果都是一样的(html,css,js,图片...)2.动态资源......
  • 2022-8-29第一组孙乃宇Servlet学习
    Servlet接触常见的web服务器什么是服务器:服务器:安装了服务器软件的计算机。服务器软件:接收用户的请求,处理请求,给出响应。(接请求,给响应)web服务器软件:接收用户的......
  • 2022-08-29 卢睿 学习心得
    目录1.Vue事件修饰符阻止事件的冒泡屏蔽标签默认行为触发一次对键盘按键进行修饰全局组件的注册局部组件的注册路由2.Web资源分类常见的web服务器概念:常见的服务器软件动态......
  • 2022-08-29 第二小组 石晓荟
    JAVAWeb01软件架构1、C/S架构:客户端/服务器--------QQ,Typora,腾讯会议。2、B/S架构:浏览器/服务器--------京东,爱奇艺,B站。资源分类静态资源:所有用户访问后,得到的......
  • 2022/8//29 Servlet 基本概念
      Javaweb 软件架构c/s架构客户端服务器b/s架构浏览器服务器  资源分类静态资源所有用户访问后得到的结果都是一样的(HTMLCSSJS图片音频视频.......
  • MySQL的sql_mode设置导致报错1292
    在MySQL8.0的一个PXC集群中,默认的sql_mode设置如下:select@@sql_mode;+-------------------------------------------------------------------------------------------......
  • 220829-漏洞分类再深入
    本篇文章针对漏洞分类问题进行深入的理解和分析。在《网络安全漏洞分类分级指南》(GB/T30279-2020)中,对漏洞分了4大类。第一类代码问题简单来说,就是程序员在写代码的时......
  • 2022-08-29 第六小组 张宁杰 配置tomcat
    事件修饰符用来和事件连用,决定事件触发的条件,或者阻止事件的触发机制事件的冒泡点击div里的按钮,div被点击的事件也被触发.stop修饰符用来阻止事件冒泡.prevent阻止......
  • 220829-Burpsuite的工作原理
    扩展:网络流量监控一般有两种模式:一种是串联模式,另一种是旁路镜像模式。串联模式下,流量会依次经过监控设备、被监控设备,二者之间是一个串行的关系。旁路镜像模式下,流量会经......
  • 2022-8-29 第一组 (≥▽≤) 学习笔记
    目录1.Vue事件修饰符阻止事件的冒泡屏蔽标签默认行为触发一次对键盘按键进行修饰全局组件的注册局部组件的注册路由2.Web资源分类常见的web服务器概念:常见的服务器软件动态......