首页 > 其他分享> > 2022-8-26 第一组（≥▽≤）学习笔记

2022-8-26 第一组（≥▽≤）学习笔记

2022-08-26 20:30:56 作者：互联网

1.JQuery
面试题

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元素,在元素里面追加,从尾部追加
- ```
$("456").appendTo($("div"));
```
prependTo()：在元素里面追加,从头部追加
- ```
 $("41356").prependTo($("div"));
```
insertAfter()：在元素后面追加

insertBefore()：在元素前面追加

    $("<p>888</p>").insertBefore($("div"));

replaceWith()：替换后边换前边
replaceAll()：替换前边换后边
- ```
$("888").replaceAll($("#12"));
```
append()：在内部的后面追加
- ```
 $("div").append($("888"));
```
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,选择器	

来源： https://www.cnblogs.com/gycddd/p/16629085.html

2022-8-26 第一组 （≥▽≤） 学习笔记