前端-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的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
随机推荐
- networkQuality
基本使用 networkQuality 是一个命令行工具,需要使用「终端」App(或者你首选的其他终端模拟器)运行.方法是: 首先,点按「程序坞」(Dock)中的「启动台」(LaunchPad)图标, ...
- pyftpdlib中文乱码问题解决方案
python实现简易的FTP服务器 from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handlers import F ...
- Kubernetes单机创建MySQL+Tomcat演示程序：《Kubernetes权威指南》第一章demo报错踩坑
引言 最近做边缘计算项目,因为没有基础,所以首先学习Kubernetes.感觉系统的中文入门资料比较少,只找到<Kubernetes权威指南>(龚正.吴治辉等著,下称<指南>) ...
- 一文带你入木三分地理解字符串KMP算法(next指针解法)
1. KMP算法简介 温馨提示:在通篇阅读完并理解后再看简介效果更佳 以下简介由百度百科提供https://baike.baidu.com/item/KMP%E7%AE%97%E6%B3%95/109 ...
- Django 之swagger中尝试调试post请求时返回 "detail": "JSON parse error - Expecting value: line 1 column 1 (char）
swagger已配置OK,但发送POST请求时一直显示数据格式错误,怪异.... 经过各种查找资料,才发现setting.py文件中缺少配置 配置完成后重启服务,再次尝试发送POST请求,不会再报格式 ...
- day06-功能实现05
家居网购项目实现05 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 12.功能11-后台分页(分页显示家居) 12.1需求分析 ...
- ClickHouse数据副本引擎
我的gitee地址:https://gitee.com/ddxygq/bigdata-technical-pai ,相关文章都放到这个仓库里了. 只有 MergeTree 系列里的表可支持副本: Re ...
- 神奇的DEBUG：因为异常导致MongoDB容器无法启动
越来越多的项目使用docker进行环境搭建,统一了开发和运行环境,好处颇多.但同时也引入了许多复杂性,比如一些容器服务突然无法启动,那么debug起来就比物理机安装的服务麻烦一些. 这段时间Mac P ...
- 如何使用 Blackbox Exporter 监控 URL?
前言 监控域名和 URL 是可观察性的一个重要方面,主要用于诊断可用性问题.接下来会详细介绍如何使用 Blackbox Exporter 和 Prometheus 在 Kubernetes 中实现 U ...
- ESXI 7.0封装网卡驱动
前段时间配置的All In One 主机,由于华擎H410M-ITX/AC主板的板载网卡为intel I219-V,在安装ESXI后网卡无法驱动.查询之后发现原来ESXI7.0.2的版本不含该网卡驱动 ...