前端-jQuery 查找标签 事件 Bootstrap页面框架
1.查找标签
1.基本选择器:
$('#d1'):id选择器
$('.c1'):class选择器
$('div'):标签选择器
2.组合选择器:
$('div#d1'):查找id为d1的div标签
$('div.c1'):查找class为c1的类
$('div,span,p'):查找div或者span或者p标签
$('#d1,.c1,span'):v查找id是d1的或者class含有c1的或者span标签
3.层级选择器:
$('div p'):查找div里面所有的后代p标签
$('div>p'):查找div所有的儿子标签p
$('span+p'):查找所有span同级别下面紧挨着的p标签
4.属性选择器
$('[username]'):查找含有username属性名的标签
$('[username="jason"]'):查找含有username属性名并且值等于jason的标签
$('input[username="jason"]'):查找含有username属性名并且值等于jason的input标签
5.基本筛选器:
$('标签名:first'):查找标签中的第一个标签
$('标签名:last'):查找标签中的最后一个标签
$('标签名:eq(索引值)'):拿到的是jQuery对象的标签
"""
$('div')[1]通过拿到所有标签在通过索引值拿到的标签就不再是一个jQuery标签,不能用jQuery的方式。
"""
$('标签名:even'):拿到索引值为偶数的标签
$('标签名:odd'):拿到索引值为奇数的标签
$('标签名:gt(索引值)'):拿到所有索引值大于指定索引值的元素
$('标签名:lt(索引值)'):拿到所有索引值小于指定索引值的元素
$('标签名:not(索引值)'):拿到所有索引值小于指定索引值的元素
$(:not(元素选择器)):移除所有满足not条件的标签
$(:has(元素选择器)):选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
6.表单筛选器
$(':text')
$(':password')
$(':checked') checked与selected都会找到
$(':selected') selected
7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
2.操作标签
1.class操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
2.位置操作
$(window).scrollTop()
3.文本操作
text() innerText
html() innerHTML
val() value
jQuery对象[0].files files[0]
4.创建标签
document.createElement() $('<a>')
5.属性操作
attr()/removeAttr() xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')
6.文档处理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
3.jQuery事件
1.JS绑定事件:标签对象.on事件名 = function (){}
2.jQuery事件绑定:
方式1:
jQuery对象.事件名(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
3.常用的事件名称:
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
实时监听input输入值变化示例,要求只要用户输入到指定的字符马上提示,改变之后提示马上消失:
<body>
username:<input type="text">
<span id="s1" style="color: red"></span>
<script>
spanEle = document.getElementById('s1')
$(':text').on('input', function () {
if (this.value === 'jason') { // 如果输入名字为jason则提示
spanEle.innerText = '用户名不能为jason'
}else{ // 只要名字不为jason,就不提示
spanEle.innerText = ''
}
})
</script>
</body>
4.事件补充
1.如果一个标签有本身的功能,再给它加一个事件,会先执行手动添加的功能。例如添加input标签,把type改成button,再给这个input标签添加一个事件,那么会先执行这个事件的操作,再执行它本身的提交功能。
2.取消后续事件:在事件代码中添加return false或e.preventDefault()即可,后面的代码,或者本身的功能都不会再执行。
<body>
<form action="">
<p>username:
<input type="text">
</p>
<p>
<input type="reset" id="d1"></p>
</form>
<script>
$('#d1').click(function () {
alert('123')
return false
})
</script>
</body> // 这样单级重置按钮就只能提示123而不能重置输入框
3.事件冒泡现象:我们先执行下列代码:
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function () {
alert('我是div')
})
$('p').click(function () {
alert('我是p')
})
$('span').click(function () {
alert('我是span')
})
</script>
</body>
我们先点击div>p>span,发现首先提示了我是span,再提示了我是p,最后又提示了我是div。这是因为标签的嵌套,点击内层的标签,又传递到外层的标签(只能由内而外的传递),这种现象叫冒泡现象。解决事件冒泡现象的方法还是在事件代码中加入 return false
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function () {
alert('我是div')
return false
})
$('p').click(function () {
alert('我是p')
return false
})
$('span').click(function () {
alert('我是span')
return false
})
</script>
</body>
4.事件委托:当我们在页面上动态添加一些标签的时候,该标签不能和其他的标签一样触发事件,通过委托可以将某个标签内所有的事件委托给button标签执行。
// jQuery对象的变量名用$开头。
$('body').on('click','button',function(){})
将body内所有的标签按钮委托给button按钮处理。body和button可以换成其他标签。
5.jQuery动画效果(了解)
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
6.Bootstrp页面框架
1.别人已经提前写好了一大堆css和js,我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。
2.在使用Bootstrp之前,我们需要将bootstrap-3.4.1-dist文件复制到pycharm所在的文件夹中,并且在pycharm的head标签中添加下面两行代码:
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
布局容器案例:https://v3.bootcss.com/css/
设置内容(直接将下列类添加到相应的标签当中):
1..container布局容器: 类用于固定宽度并支持响应式布局的容器。
class = "container":页面两边留空白式布局
class = "container-fluid":页面两端不留空白
2.栅格系统(响应式布局):页面上导航栏的部分,栅格系统可以将row类的长度均分为12份,自定义其中的内容。col-md后面的数据加起来应该等于12。低于12份自己独占一行。col-md-num是电脑布局,col-xs-num是手机布局,col-sm-num是平板布局。
<style>
.c1 {
background-color: yellow;
height: 100px;
border: 5px solid green;
}
</style>
<body>
<div class="container c1">
<div class="row">
<div class="col-md-9 c1"></div>
<div class="col-md-3 c1"></div> // 代表第一部分占9/12,第二部分占3/12
</div>
</div>
</body>
当我们添加上手机布局之后,缩小页面或者是设置手机型号之后样式会发生改变。
当我们想把一行(不满12份)布局居中时,可以用col-md-offset-num设置偏移量,偏移值中间即可。
<div class="col-md-6 c1 col-md-offset-3"></div>
7.重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
更多样式:
https://v3.bootcss.com/components/#nav-dropdowns
8.组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
前端-jQuery 查找标签 事件 Bootstrap页面框架的更多相关文章
- JQuery查找标签
JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...
- DOM标签操作与事件与jQuery查找标签
目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- web前端----jQuery操作标签
样式操作 样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass() ...
- jQuery 查找标签
1 基本选择器 2 基本筛选器 3 属性选择器 4 间接选择 1 基本选择器 //id选择器: $("#id") //标签选择器: $("tagName") / ...
- Jquery 绑定标签事件
为子元素绑定: $('#foreachResult').delegate('td', 'click', function () { alert($(this).text()); ...
- jquery-事件之页面框架加载后自动执行
jQuery事件之页面框架加载后自动执行 1)概述 HTML执行是按自上而下编译,而<script>一般写在body结束之前.如果在HTML加载的过程中卡住, 比如加载图片等,没有显示出来 ...
- jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- 6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）
DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
随机推荐
- Python 学习思路 思维导图 Xmind
如果需要,请在评论区留下邮箱,我看到后会一次发送.
- PS2023下载安装保姆级教程中文汉化完整版
PS2023Windows安装教程退出安全软件①:下载PS2023安装包 ②:打开下载好的文件,鼠标右键把安装包解压③:打开解压好的"PS 24.0.0"文件夹,找到并选中&quo ...
- Go语言核心36讲39
在上一篇文章中,我介绍了Go语言与Unicode编码规范.UTF-8编码格式的渊源及运用. Go语言不但拥有可以独立代表Unicode字符的类型rune,而且还有可以对字符串值进行Unicode字符拆 ...
- windows安装grunt时提示不是内部或外部命令解决方案
参考:https://www.cnblogs.com/hts-technology/p/8477258.html 安装windows安装elasticsearch-head时 不需要输入grunt s ...
- 单一接口优化过程全记录（主要涉及Redis）
接口优化过程记录 问题背景 某个接口耗时长(247ms),但里面逻辑不算复杂,只进行了简单的对象引用以及操作了多次Redis 步骤1:链路追踪,确定业务耗时点 接口里通过链路追踪以及日志查询发现主要是 ...
- vba + ado +sql 连接数据库的常用操作方式
vba + ado +sql 连接Access.MySQL.Oracle Private Sub Connection_DBA() '********************************* ...
- RequestMappingHandlerMapping请求地址映射流程！
上篇文章里,我们讲解了RequestMappingHandlerMapping请求地址映射的初始化流程,理解了@Controller和@RequestMapping是如何被加载到缓存中的. 今天我们来 ...
- vue3项目，记录我是如何用1h实现产品预估1天工作量的界面需求
最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经 ...
- python中使用pip 安装第三方库报错归类及解决方式
1. 离线安装virtualenv报错,安装命令:python setup.py install 解决方式:升级setuptools 2. 安装第三方库时安装失败,安装命令:pip install ...
- VUE 使用md5对用户登录密码进行加密传输
VUE 使用md5对用户登录密码进行加密传输到数据库 前言 第一步 npm下载js-md5依赖包 第二步 引入js-md5 直接在需要使用md5加密的页面引入 全局挂载,将js-md5添加到vue原型 ...