前端-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的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
随机推荐
- 一个超经典 WinForm 卡死问题的再反思
一:背景 1.讲故事 这篇文章起源于昨天的一位朋友发给我的dump文件,说它的程序出现了卡死,看了下程序的主线程栈,居然又碰到了 OnUserPreferenceChanged 导致的挂死问题,真的是 ...
- ubuntu生成pem证书连接服务器（已验证）
SSH 密钥认证是什么? 与用户密码登录相比,SSH 密钥认证更安全,因为只有拥有密钥的人才能连接,并且密钥通过不同的算法进行了很好的加密.它还通过无密码登录使 SSH 连接变得简单. 这个搞两个方案 ...
- Kubernetes核心技术Pod
Kubernetes核心技术Pod Pod概述 Pod是K8S系统中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型,也是在K8S上运行容器化应用的资源对象,其它的资源对象 ...
- 2、两个乒乓球队，甲队有a，b，c三名队员，乙队有d,e,f三名队员，甲队a不愿和d比赛，c不愿意和d，f比赛，求合适的赛手名单
/*两个乒乓球队,甲队有a,b,c三名队员,乙队有d,e,f三名队员,甲队a不愿和d比赛,c不愿意和d,f比赛,求合适的赛手名单 */ #include <stdio.h> #includ ...
- c# Winfrom桌面软件自动升级系统
对于开发桌面应用升级应该是我们第一个要考虑的.一般而言一个项目只有一个客户端,有的时候一个项目可能分好几个客户端,前台客户端,后台客户端.而我在网上找了很久也没有找到可以同时管理多个客户端升级的.所以 ...
- C温故补缺(十四):内存管理
内存管理 stdlib库中有几个内存管理相关的函数 序号 函数和描述 1 void *calloc(int num, int size);在内存中动态地分配 num 个长度为size 个字节 的连续空 ...
- 07#Web 实战：实现 GitHub 个人主页项目拖拽排序
实现效果图 GitHub 和 Gitee 个人主页中可以对自己的项目进行拖拽排序,于是我就想自己实现一个.本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程. ...
- 数电第11周周结_by_yc
Lab7_时序逻辑验证 一.简易电子时钟 功能描述: 设计一简易电子时钟,支持时.分.秒显示,其中HEX7-HEX6显示时,HEX5-HEX4显示分,HEX1-HEX0显示秒,假设进制为:18秒= ...
- vulnhub靶场渗透实战12-driftingblues2
vbox导入,网络桥接. 靶机下载地址:https://download.vulnhub.com/driftingblues/driftingblues2.ova 一:信息收集 1:主机发现. 2: ...
- ATM项目
ATM项目实战 项目需求分析: 1.注册(密码要加密) 2.登陆 3.查看余额 4.提现(可自定手续费) 5.还款 6.转账 7.查看流水 8.添加购物车功能 (商品可配置) 9.查看购物车功能 10 ...