目录
1.JQuery
JS库：别人写好的js文件，我们拿来直接用
- JQuery.js---------濒临淘汰，经典
- React.js-----------30%市场占有
- Augular.js--------最难
- Vue.js--------------简单，主流
CSS库
- bootstrap，layui，easyui
文档就绪函数
-
当页面的文档部分加载完毕之后，要执行的函数
-
$(document).ready(function(){ alert("文档就绪函数"); }); $(function(){ alert("文档就绪函数") })
选择器
基本选择器
-
id选择器——返回值是唯一的
-
<div id="div1"></div> <script> $(() =>{ let s =$("#div1"); console.log(s); }); </script>
-
-
类选择器——返回值是多个
-
<div id="div1" class="div1"></div> <script> $(() =>{ let s =$(".div1"); console.log(s); }); </script>
-
-
标签选择器——返回值是多个
-
<div id="div1" class="div1"></div> <script> $(() =>{ let s =$("div"); console.log(s); }); </script>
-
-
全部选择器——返回值是所有的标签
-
<script> $(() =>{ let s =$("*"); console.log(s); }); </script>
-
层级选择器
- 父标签空格子标签——后代
- 父标签>子标签——直接子元素
- 父标签+子标签——相邻的
过滤选择器
- 标签：first——获取第一个元素
- 标签：last——获取最后一个元素
- 标签：eq(index)——给定位置的元素
- 标签：gt(index)——大于给定位置的元素
- 标签：lt(index)——小于给定位置的元素
- 标签：not(selector)——除了selector以外的所有选择器
内容选择器
- 标签：empty——匹配所有不包含子元素的选择器
- 标签：parent——含有子元素的父元素
属性选择器
- 标签[name]——包含name属性的选择器
- 标签[type=text]——文本框
- 标签[type！=text]——除了文本框的其他选择器
事件
-
click()——单击事件
-
<button id="btn1" >按钮</button> <script> $(function(){ $("#btn1").click(() =>{ alert("按钮被点击") }); }) </script>
-
-
blur()——失去焦点
-
mouseover()——鼠标悬停
-
live()——可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
-
【我们常规的去添加事件有前提条件——标签必须原原本本存在HTML页面上】
函数
新建
-
appendTo()：参数是一个JQuery元素,在元素里面追加,从尾部追加
-
$("<p>456</p>").appendTo($("div"));
-
-
prependTo()：在元素里面追加,从头部追加
-
$("<p>41356</p>").prependTo($("div"));
-
-
insertAfter()：在元素后面追加
-
insertBefore()：在元素前面追加
-
$("<p>888</p>").insertBefore($("div"));
-
-
replaceWith()：替换后边换前边
-
replaceAll()：替换前边换后边
-
$("<p>888</p>").replaceAll($("#12"));
-
-
append()：在内部的后面追加
-
$("div").append($("<p>888</p>"));
-
-
prepend()：在内部的前面追加
-
after()：在外部的后面追加
-
before()：在外部的前面追加
删除
-
empty()：清空标签里的全部内容
-
remove()：删除某一个标签
属性
-
属性操作
-
html()——innerText
-
text()——innerHTML
-
val()——input.value
-
<div id="div1"></div> <input type="text" id="username"> <script> $(()=>{ $("#div1").html("<p>1412</p>") $("#div1").text("1412") $("#username").val("666"); }) </script>
-
-
val函数除了可以给文本框赋值，还可以给单选框，多选框，下拉菜单的选择
-
attr()——setAttribute或getAttribute——【有bug】
-
// 设置value属性 $("#as").attr("value","哇哈哈哈哈"); // 获取value属性的值 alert( $("#as").attr("value"))
-
-
-
练习
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="12.js"></script> </head> <body> <input type="checkbox" id="xz1"> 全选 / 不全选 <br> <br> <input type="checkbox" class="xz5"> 标签：index,26,checked,标签,第一组,click,2022,prop,选择器 From： https://www.cnblogs.com/gycddd/p/16629085.html
-