首页 > 其他分享 >jQuery查找标签、操作标签、事件和动画效果,Bootstrap页面框架的介绍和使用讲解

jQuery查找标签、操作标签、事件和动画效果,Bootstrap页面框架的介绍和使用讲解

时间:2022-12-07 20:44:15浏览次数:48  
标签:jQuery 标签 Bootstrap 查找 div id fn

今日内容

jQuery查找标签

1.基本选择器:

$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器

2.组合选择器:

$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或span或p标签
$('#d1,.c1,span') 查找id是d1或含有c1样式类或span标签

3.层级选择器:

$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级下面紧挨着的p标签
$('div~p') 查找div同级下面的所有p标签

4.属性选择器:

$('[a]') 查找含有a属性名的标签
$('[a=jason]') 查找含有a属性名并且值等于jason的标签
$('input[a=jason]') 查找含有a属性名 值等于jason的标签 并且带有input标签

5.基本筛选器:

:first 第一个
:last 最后一个
:eq(index) 索引等于index的那个元素
:even 匹配所有索引值为偶数的元素 从0开始计数
:odd 匹配所有索引值为奇数的元素 从0开始计数
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签再内的其他标签(指从后代元素找)

6.表单筛选器:

$(':text')
$(':password')
$(':checked') checked与selected都能找到
$(':selected') 只能找到selected

7.筛选器方法:

$('#id').next/prev() 找id下/上面的下一个标签
$('#id').nextAll/prveAll() 找id下/上面的所有标签
$('#id').nextUntil('#id1')/prevUntil('#id1') 找id下/上面的所有标签知道id1标签停止
$("#id").partent() 找父标签 可以一直点往上找父标签
$("#id").parents() 一次性拿到所有父标签
$("#id").parentsUntil('#i2') 一次性拿苏哦有的父标签直到i2停止
$("#id").children() 找所有的子标签
$("#id").siblings 找所有的同级标签

操作标签

1.class操作:

jQuery JS
addClass() classList.add() 添加指定类
removeClass() classList.remove() 移除指定类
hasClass() classList.contains() 判断类存不存在
toggieClass() classList.toggle() 切换类 如果有就移除 没有就添加

2.位置操作:

$(window).scrollTop()  滚动条距离顶部的距离

3.文本操作:

jQuery JS
text() innerText 获取标签内的所有文本内容
html() innerHTML 获取标签内的所有标签包含文本
val() value 针对用户输入和用户选择的标签
jQuery对象[0].files files[0] 针对用户上传文件的数据

4.创建标签:

jQuery JS
$('') document.createElement() 创建标签

5.属性操作:

jQuery JS
attr()/removeAttr() xxxAttribute() 返回属性值/删除属性值
prop('checked/selected') 获取属性
removeprop('checked/selected') 删除属性

6.文档处理:

$(A).append(B) 把A追加到B
$(B).appendTo(A) 把B追加到A
$(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() 删除匹配的元素集合中的所有子节点

jQuey事件

1.绑定事件:

jQuery JS
方式1:jQuery对象.事件名(function(){}) 标签对象.on事件名 = function(){}
方式2:jQuery对象.on('事件名称,function(){}')

ps:默认用方式1 不行就用方式2

2.clone属性:

clone(true)			默认只克隆样子 不克隆事件 
					加true 克隆事件

3.取消后续事件:

事件函数的最后加 return false

4.阻止冒泡事件:

事件函数的最后加 return false

5.等待页面加载完毕后再执行代码:

$(function(){})

4.事件委托:

主要针对动态创建的标签也可以使用绑定的事件
$('body')on('click','button',function(){})
将body内的单击事件委托给button标签执行

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])

Bootsstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V5即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题
	最好本地导入几次

核心部分讲解

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他

标签:jQuery,标签,Bootstrap,查找,div,id,fn
From: https://www.cnblogs.com/lzy199911/p/16964491.html

相关文章

  • jQuery查找标签、操作标签、事件和动画效果,Bootstrap页面框架的介绍和使用讲解
    jQuery查找标签1.基本选择器$('#d1')id选择器$('.c1')class选择器$('div')标签选择器2.组合选择器$('div#d1')查找id是d1的div标签$('span.c1')查找含有......
  • jQuery教程
    目录jQuery介绍jQuery的优势jQuery对象选择标签ID选择器选择器更多方法操作标签创作标签/添加标签绑定事件取消后续事件jQuery介绍jQuery是一个轻量级的、兼容多浏览器......
  • jQuery——标签、事件、动画
    jQuery——标签、事件、动画一、查找标签1.1基本选择器//id选择器$('#d1')//class选择器$('.c1')//标签选择器$('div')2.2组合选择器//查找含有c1样式......
  • jQuery使用 前端框架Bootstrap
    目录jQuery查找标签1.基本选择器2.组合选择器3.后代选择器4.属性选择器5.基本筛选器7.筛选器方法链式操作的本质操作标签1.class操作2.位置操作3.文本操作4.创建标签5.属性......
  • jQuery类库
    jQuery介绍1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。2.jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大......
  • jQuery 及 Bookstrap 基本使用
    今日内容总结jQuery查找标签1.基本选择器 $('#d1') id选择器 $('.c2') class选择器 $('div') 标签选择器2.组合选择器 $('div#d1') 查找id是d1的div标签......
  • Bootstrap页面框架
    简介点击链接:https://v3.bootcss.com/别人已经提前写好了一大堆css和js我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能版本有很多使用V3即可......
  • 12月7日内容总结——jQuery查找标签、操作标签、事件和动画效果,Bootstrap页面框架的介
    目录一、jQuery查找标签基本选择器层级选择器:基本筛选器:属性选择器:表单筛选器:筛选器方法二、操作标签样式操作(class操作)位置操作尺寸:文本操作创建标签属性操作文档处理三、......
  • bootstrap
    今日内容概要作业讲解jQuery查找标签jQuery节点操作jQuery事件绑定Bootstrap页面框架今日内容详细作业讲解1.校验用户数据 letusernameEle=document.ge......
  • jQuery和Bootstrap
    目录jQuery查找标签操作标签jQuery事件事件相关补充jQuery动画效果(了解)Bootstrap页面框架核心部分讲解重要样式组件jQuery查找标签基本选择器$('#d1') id选择器$('.c1'......