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

标签：jQuery function 元素标签 Bootstrap 事件 div id

jQuery查找标签

1.基本选择器

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

2.组合选择器

$('div#d1')    查找id是d1的div标签
$('span.c1')  查找含有class为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="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

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只会找到selected

7.筛选器方法

$('#id').next     当前元素之后第一个兄弟节点
$("#id").nextAll() 当前元素之后所有的兄弟节点
$("#id").nextUntil("#i2")  //找同级别下所有标签,直到#i2就不拿了
$("#id").prev()    当前元素前一个兄弟节点
$("#id").prevAll()	当前元素之前所有的兄弟节点
$("#id").prevUntil("#i2")  //找同级别上所有标签,直到#i2就不拿了
$("#id").parent() //找父标签
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

操作标签

1.class操作

jQuery操作	JS操作	作用
addClass();	classList.add()	添加类名
removeClass();	classList.remove()	删除类名
hasClass();	classList.contains()	判断类名是否存在
toggleClass();	classList.toggle()	有则移除，没有则添加

2.位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

3.文本操作

jQuery操作	JS操作	作用
text()	innerText()	添加文本
html()	innerHTML()	添加文本+html格式
val()	value	获取值
[0].files	files	获取标签内的文件值

4.创建标签

document.createElement()  $('<a>')

5.属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

但是attr针对动态变化的属性获取会失真

prop('checked') prop('selected')

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

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就可以

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件绑定

.on( events [, selector ],function(){})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

移除事件

.off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

events：事件
selector: 选择器（可选的）
function: 事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等

e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

注意：

像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

事件相关补充

1.取消后续事件

事件函数的最后return false即可

2.阻止冒泡事件

事件函数的最后return false即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

3.等待页面加载完毕再执行代码

$(function(){})				      缩略写法
 $(document).ready(function(){})  完整写法

4.事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

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

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

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

自定义动画特效(点赞特效)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

Bootstrap页面框架

使用Bootstrap页面框架，就相当于使用别人已经提前写好了的一大堆css和js，我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。

官网地址：https://v3.bootcss.com/

点击下载Bootstrap进入下方页面

这里我们下载v3的版本，如果需要使用别的版本，在上方更换即可。

文件结构
bootstrap.css
bootstrap.js
ps:如果我们想要在js中使用Bootstrap是需要依赖于jQuery的

CDN的导入

网址：https://www.bootcdn.cn/twitter-bootstrap/

<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自动提示问题

当我们第一次在pycharm中使用Bootstrap的时候会发现在编写代码的时候并不会出现自动提示。

解决方法就是先在pycharm中本地导入几次，之后在使用的时候就会出现自动提示了。

核心部分讲解

我们在使用Bootstrap的时候其实就是给需要添加样式的标签添加class类，添加了对应的类，就可以产生对应的美化效果。

官网教学文档：https://v3.bootcss.com/css/#forms-horizontal

其他文档也在官网

布局容器
	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/
导入方式一：本地导入
他需要下载一个font文件包，类似Bootstrap一样的导入方式
导入方式二：CDN
CDN网址：https://www.bootcdn.cn/font-awesome/
    
2.导航条
	class="navbar navbar-inverse"
3.其他

标签：jQuery,function,元素,标签,Bootstrap,事件,div,id
From： https://www.cnblogs.com/wwssadadbaba/p/16964452.html

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