首页 > 其他分享> 文章详细

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

2022-08-26 20:30:56 阅读：247 来源： 互联网

标签：index 26 checked 标签第一组 click 2022 prop 选择器

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 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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