前端-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的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
随机推荐
- Halocn双目相机标定
[Halcon]Halcon双目标定 相机标定(4)---基于halcon的双目立体视觉标定 双目立体视觉:四(双目标定matlab,图像校正,图像匹配,计算视差,disparity详解,) 双目测距 ...
- 专业的C头文件设计和重构指南
头文件设计要点: 1. 头文件注释 2. guard define 3. 尽量不要在头文件中暴露数据结构 4. 要自包含,保证头文件独立编译和功能正确 5. 函数声明前加XXX_API利于拓展 6. ...
- ThinkPhp5 自定义异常处理类
在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...
- tomcat下载安装&配置教程
tomcat下载安装&配置教程 1 安装jdk 1.1 安装jdk 1.2 安装JDK后设置环境变量 1.3 使环境变量生效 1.4 查看java版本 2 安装tomcat 2.1 在/usr ...
- 5V升压12.6V
产品概述 PW4053 是一款 5V 输入,最大 1.2A 充电电流,支持三节锂离子电池的升压充电管理 IC.PW4053 集成功率 MOS,采用异步开关架构,使其在应用时仅需极少的外围器件,可有效减 ...
- mac连接mysql出现Access denied for user ‘root‘@‘localhost‘
处理方法:1.关闭mysql的服务,点击最左上的苹果图标在系统偏好设置中,找到mysql,点击,stop 确认关闭后进入终端 输入(cd /usr/local/mysql/bin/)回车 输入(sud ...
- IOS移动端 -webkit-overflow-scrollin属性造成的问题
-webkit-overflow-scrolling带来的相关问题. -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 其具有两个属性: auto: ...
- 1.5.5 HDFS读写解析-hadoop-最全最完整的保姆级的java大数据学习资料
目录 1.5.5 HDFS读写解析 1.5.5.1 HDFS读数据流程 1.5.5.2 HDFS写数据流程 1.5.5 HDFS读写解析 1.5.5.1 HDFS读数据流程 客户端通过Distribu ...
- SpringBoot向Excel模板中写入数据并下载 （无需获取file对象及模板绝对路径）
之前用获取模板路径的方式测试没问题打包后就有问题了 莫名出现一个! 找了很多教程尝试无果 最终使用下面这个方式 无需获取file对象以及模板路径的方式进行写入下载 (那个设置浏览器编码没有测试不知道能 ...
- 【转载】EXCEL VBA UBound(arr,1),UBound(arr,2)解释
Resize(UBound(arr, 1), UBound(arr, 2) 这句什么意思 resize()是一个扩展单元格地址区域的函数,有两个参数,第一个是行扩展数,第二个是列扩展数 UBo ...