前端学习最后一天

目录

• 前端学习最后一天
  • 一、jQuery查找标签
    • 1.基本选择器
    • 2.组合选择器
    • 3.层级选择器
    • 4.属性选择器
    • 5.基本筛选器
    • 6.表单筛选器
    • 7.筛选器方法
  • 二、jQuery节点操作
    • 1.class操作
    • 2.位置操作
    • 3.文本操作
    • 4.创建标签
    • 5.属性操作
    • 6.文档处理
  • 三、jQuery事件绑定
    • 1.jQuery事件
    • 2.事件相关补充
    • 3.jQuery动画效果(了解)
  • 四、Bootstrap框架
    • 1.基本知识
    • 2.核心部分
    • 3.重要样式
    • 4.重要组件

前端学习最后一天

一、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="almira"]') 	 查找含有username属性名且值等于almira的标签
$('input[username="almira"]') 最精准的查找方式

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").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

二、jQuery节点操作

1.class操作

jQuery代码			JavaScript代码
addClass()			  classlist.add()
removeClass()		  classlist.remove()
hasClass()   		  classlist.contains()
toggleClass()		  classlist.toggle()

2.位置操作

$(window).scrollTop()

3.文本操作

jQuery代码		   JavaScript代码
text()				innerText
html()				innerHTML
val()				value

4.创建标签

document.createElement()

5.属性操作

jQuery代码		   		 JavaScript代码
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事件绑定

1.jQuery事件

# JavaScript绑定事件
	标签对象.on事件名 = function (){}

# jQuery事件绑定(默认是方式一，不行再试方式二)
    方式一：jQuery对象.事件名(function(){})
    方式二：jQuery对象.('事件名'，function(){})
    
clone属性(补充知识)
	clone(true)  # 默认不克隆 家true就可以

2.事件相关补充

1.取消后续事件
	事件函数的最后return false即可
2.阻止事件冒泡
	事件函数的最后return false即可
3.等待页面加载完毕再执行代码
	$(function(){})				   缩略写法
 	$(document).ready(function(){})  完整写法
4.事件委托
	主要针对动态创建的标签也可以使用绑定的事件
 	$('body').on('click','button',function(){})
 	将body内所有的单击事件委托给button标签执行

3.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框架

1.基本知识

1.Bootstrap框架
	别人已经写好了的css和js 只需要按规定cv即可实现大部分需求
    
2.关于版本
	版本有好多 使用V3即可
    
3.文件结构
	bootstrap.css
    bootstrap.js
    
4.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>

2.核心部分

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

1.布局容器
    class = "container"          有留白
    class = "container-fluid"    没有留白

2.栅格系统
    class = "row"         一行均分12份
    class = "col-md-8"    划分一行的12份

3.屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3   响应式布局
4.栅格偏移
	col-md-offset-3    可以做居中

3.重要样式

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

4.重要组件

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