JavaScript（三）

❤️‍JavaScript

❤️‍jQuery查找标签

🍓1.基本选择器
	$('#id名')		id选择器
    $('.class名')	class选择器
    $('标签名')	   标签选择器
    
🍓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="jason"]')	查找含有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").nextUntil("#i2")
	 $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

❤️‍操作标签

🍓1.样式类：

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

🍓2.位置操作：

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

🍓3.文本操作：

html:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
文件：
jQuery对象[0].files	js:files[0]

🍓4.创建标签：

js:document.createElement()		jquery:$('<a>')

🍓5.属性操作：

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

attr针对动态变化的属性获取会失真
prop() // 获取属性
removeProp() // 移除属性
	prop('checked')  prop('selected')

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

prop不支持获取标签的自定义属性。

🍓总结一下：

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

🍓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事件绑定
	方式一：
    	jQuery对象.事件名(function(){})
    方式二：
    	jQuery对象.on('事件名称',function(){})
 ps:默认使用方式1，不行报错了就用方式2

补充：
	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])

🍓自定义动画代码：

点击查看代码 
<!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 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。我们只需要引入之后按照人家规定好的操作方式即可使用的样式和功能

版本很多，推荐使用V3即可。

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

准备工作：

文件及结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery

CND
<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" ></scrip>

pycharm自动提示的问题
	建议本地导入几次

image

posted @ 2022-12-07 18:54  亓官扶苏  阅读(171)  评论(0)    收藏  举报