首页 > 其他分享 >jQuery、Bootstrap页面框架

jQuery、Bootstrap页面框架

时间:2022-12-07 21:37:08浏览次数:34  
标签:jQuery 标签 Bootstrap 选择器 查找 div id 页面

今日内容概要

  • jQuery查找标签
  • jQuery节点操作
  • jQuery事件绑定
  • Bootstrap页面框架

今日内容详细

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的或者class含有c1的或者span标签
3.层级选择器
	$('div p')			查找div里面所有的后代p标签
	$('div>p')			查找div里面的儿子p标签
	$('div+p')			查找div同级别下面紧挨着的p标签
	$('div~p')			查找div同级别下面所有的p标签
4.属性选择器
	$('[username]')			查找含有username属性名的标签
	$('[username="guts"]')   查找含有username属性名并且值等于Jason的标签
	$('input[username="jason"]')
5.基本筛选器
	:first // 第一个
	:last // 最后一个
	:eq(index) // 索引等于index的那个元素
	:even // 匹配所有索引值为偶数的元素,从 0 开始计数
	:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
	:gt(index) // 匹配所有大于给定索引值的元素
	:lt(index) // 匹配所有小于给定索引值的元素
	:not(元素选择器) // 移除所有满足not条件的标签
	:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
	$('li:first')	优化		$('li').first()

6.表单选择器
	$(':text')
	$(':password')
	
	$(':checked')		checked与selected都会找到
	$(':selected')		selected
7.筛选器方法
	$("#id").next()
    $("#id").nextAll()
    $("#id").nextUnitil("#i2")
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil()  // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止
    $("#id").children()  // 儿子们
    $("#id").siblings()  // 兄弟们

操作标签

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()// 删除匹配的元素集合中所有的子节点。

jQuery事件

JS绑定事件
	标签对象.on事件名 = function(){}
jQuery事件绑定
	方式1:
        jQuery对象.事件名(function(){})
	方式2:
        jQuery对象.on('事件名称',function(){})
	ps:默认就用方式1 不行了再用方式2
ps:补充
    clone属性
		clone(true)		默认不克隆事件 加true就可以

事件相关补充

1.取消后续事件
	事件函数的最后return false即可
2.阻止事件冒泡
	事件函数的最后return false即可
3.等待页面加载完毕再执行代码
	$(function(){})				缩略写法
	$(document).ready(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])

Bootstrap页面框架

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

版本有很多 使用V3即可

文件结构
	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,页面
From: https://www.cnblogs.com/DragonY/p/16964578.html

相关文章

  • jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架
    jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架一、jQuery查找标签1.各种选择器1.基本选择器$('#id')id选择器$('.c1')类(cl......
  • Bootstrap页面框架
    Bootstrap页面框架Bootstrap页面框架是已经提前写好了一大堆css和js,我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。Bootstrap链接:https://v3.b......
  • 前端 jQuery与Bootstrap
    jQuery查找标签//1.基本选择器$('#d1')id选择器$('.c1')class选择器$('div')标签选择器$("*")......
  • 前端之Bootstrap框架
    Bootstrap页面框架别人已经提前写好了一大堆css和js,我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。 Bootstrap下载官网地址:https://v3.bootcs......
  • 进入python的世界_day47_前端——JQ补充、bootstrap前端框架
    一、jQuery补充​ 说在最前面,如果想把JQ对象赋值给一个变量名,起名字依旧要讲究,建议名字前加$,这样别人一看就知道是JQ对象1.筛选器//1.属性选择器$('username')//......
  • 前端开发 6 jQuery使用与Bootstrap
    今日内容详细目录今日内容详细jQuery查找标签1.基本选择器2.组合选择器3.层级选择器4.属性选择器5.基本筛选器6.表单筛选器7.筛选器方法操作标签jQuery事件事件相关补充jQ......
  • jQuery与Bootstrap
    今日内容概要jQuery查找标签jQuery节点操作jQuery事件绑定Bootstrap页面框架今日内容详细jQuery查找标签1.基本选择器 $('#d1') id选择器 $('.c1') class......
  • 前端框架 —— bootstrap介绍
    前端框架——bootstrap介绍bootstrap安装我们可以通过官网下载bootstrap的代码到本地,也可以通过CDN分发网络引入我们的html文件。下载到本地下载Bootstrap生产文件......
  • JavaScript:jQuery类库
    目录jQuery类库一、jQuery简介1.特点2.使用jQuery的不同方式3.jQuery底层本质4.标签对象与jQuery对象二、jQuery查找标签1.基本选择器2.组合选择器3.层级选择器4.属性选择......
  • jQuery、bootstrap
    jQuery查找标签1.基本选择器 $('#d1') id选择器 $('.c1') class选择器 $('div') 标签选择器2.组合选择器 $('div#d1') 查找id是d1的div标签 $('span.c1') ......