table of Contents

dom&JavaScript&Jquery

Built Node

grammar:

createElement (name tag)

Example:

var divEle = document.createElement("div");

Add Nodes

grammar:

Append a child node (a child node as the last)

somenode.appendChild(newnode)；

The added nodes placed in front of a node.

somenode.insertBefore (newnode, a node);

Example:

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

Delete node:

grammar:

Gets the element you want to delete, delete the method by calling the parent element.

somenode.removeChild (node to be removed)

Replace node:

grammar:

somenode.replaceChild (newnode, a node);

Attribute nodes

Gets the value of the text node:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

The text value of the node:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute operation

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

Gets the value of the operation

grammar:

elementNode.value

For the following tags:

.input
.select
.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class action

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

Specifies the CSS operation

obj.style.backgroundColor="red"

JS CSS property law operation:

1. For the CSS property not used directly in the horizontal line of the general style. Attribute name. Such as:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2. CSS properties contained in the horizontal line, the first letter capitalized later horizontal line can be replaced. Such as:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

Operation node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>div上面的span</span>
<div>div
    <p>div>p</p>
    <span id="s1">div>span</span>
    <p>div>p
        <span>div>p>span</span>
    </p>

</div>
<span>div+span</span>
</body>
</html>

Get input user input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">

<textarea name="" id="t1" cols="30" rows="10"></textarea>
</body>
</html>

Operation class label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
</html>

event

Common events

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

Binding way:

method one:

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

note:

this is an argument that is the current element that triggered the event.

Function definition during ths as parameter.

Second way:

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

Click event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }

    </style>

</head>
<body>
<div class="c1 bg_red bg_green"></div>
<button id="b1">给你戴帽子</button>
<img src="1.png" alt="" id="d1">


<script>
    let iEle = document.getElementById('d1');
    iEle.onclick = function () {
        alert(123)
    };


    // 先找到你想绑定事件的那个标签
    var b1ELe = document.getElementById('b1');
    // 给这个标签对象绑定相应的事件
    b1ELe.onclick = function () {
        // 找到事件影响的标签对象
        let dEle = document.getElementsByClassName('c1')[0];
        dEle.classList.toggle('bg_green')
    }

</script>
</body>
</html>

Events gets focus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="618大促" id="i1">

<script>
    let iEle=document.getElementById('i1');
    //获取焦点
    iEle.onfocus = function (){
        iEle.value = ''
    }
    //失去焦点
    iEle.onblur = function() {
        iEle.value='有钱就买mac'
    }

</script>
</body>
</html>

Timer Case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text"  id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

</body>
</html>

Check input (direct input box may display the content)

var iEle = document.getElementById('d1');
undefined
var cTime=new Date();
undefined
iEle.value=cTime.toLocaleString();
"2019/6/3 下午4:36:55"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label for="">                                              #要加入label才能显示
    <input type="text"  id="d1">
</label>
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
    var iEle=document.getElementById('d1');
    var showtime=function(){                  
        var cTime= new Date();
        iEle.value= cTime.toLocaleString();
    };
    showtime()
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text"  id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
    var iEle=document.getElementById('d1');   #没有调用函数，直接也可以显示，input不用加label
    var cTime= new Date();
    iEle.value= cTime.toLocaleString();

</script>
</body>

最终版
！！！！！！！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var b1Ele = document.getElementById('b1');
    var iEle = document.getElementById('d1');
    var b2Ele = document.getElementById('b2');
    // 定义一个展示时间的函数
    var showTime = function(){
        // 获取当前时间
        var cTime = new Date();
        iEle.value = cTime.toLocaleString()
    };
    // 给b1标签绑定点击事件
    b1Ele.onclick = function () {        #事物后面一般写函数而不是直接写js语句
        // 先判断flag是否已经指代了一个定时器
        if (!flag){
            flag = setInterval(showTime,1000)
        }
    };

    b2Ele.onclick = function () {
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;
    }
</script>
</body>
</html>

Provinces linkage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">

</select>

<select name="" id="d2">

</select>


<script>
    // 先获取需要操作的标签对象
    let proEle = document.getElementById('d1');
    let cityEle = document.getElementById('d2');
    let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 将所有的省渲染到proEle标签内部  for循环获取所有的省
    for (let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 给option标签设置文本值
        opEle.innerText = pro;
        // 将生成的option标签添加到proEle中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {
        // 先清空cityEle标签内所有的内容
        cityEle.innerHTML = '';
        // 获取用户选择的省 根据省拿到对应的市
        let choice_pro = proEle.value;
        let cityList = data[choice_pro];
        // for循环创建option标签添加到cityEle标签内
        for (let i=0;i<cityList.length;i++){
            // 创建option标签并添加文本
            let cEle = document.createElement('option');
            // 给option标签设置文本值
            cEle.innerText = cityList[i];
            // 将生成的option标签添加到proEle中
            cityEle.appendChild(cEle)
        }
    }

</script>
</body>
</html>

jquery

jquery acquaintance

jQuery object is an object produced after packaging DOM objects by jQuery. jQuery object is unique to jQuery. If an object is a jQuery object , then you can use jQuery in the way: for example, $ ( "# i1") html ().

$("#i1").html()It means: id value acquiring i1html code elements. Which html()is in the jQuery method.

It is equivalent to: document.getElementById("i1").innerHTML;

Although the jQuery对象packaging DOM对象produced later, but jQuery对象can not use DOM对象any method, empathy DOM对象did not use jQueryin the method.

A convention, we declare a jQuery object variable in the time before the variable name with $:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

Basic jquery selector

The basic selector

id selector:

$("#id")

Tag selector:

$("tagName")

class selector:

$(".className")

With the use of:

$("div.c1")  // 找到有c1 class类的div标签

All elements of selectors:

$("*")

Combined selector:

$("#id, .className, tagName")

Level Selector:

x and y may be any selector

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

可供测试
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<span class="span">div上面的span标签</span>
<div id="d1">div
    <p>div>p
        <span>div>p>span</span>
    </p>
    <span id="d3">div>span</span>
</div>
<span class="c1">span</span>
</body>
</html>

Basic filters

first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

example:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>

<ul>
    <li id="1">书籍1</li>
    <li>书籍2</li>
    <li id="3">书籍3</li>
    <li>书籍4</li>
    <li id="5">书籍5</li>
</ul>

</body>
</html>

Operation class attribute jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
    <style>
        .c1 {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
</html>

Form Filter

Attribute Selector:

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

example:

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

Form Filters :

:text
:password
:file

:radio
:checkbox

:submit
:reset
:button

example:

$(":checkbox")  // 找到所有的checkbox

Form object properties:

:enabled
:disabled
:checked
:selected

example:

Find input tags available

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

Find the selected option:

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<form action="">
    <p><input type="text"></p>
    <p><input type="password"></p>
    <p><input type="date"></p>
    <p><input type="radio"></p>
    <p><input type="checkbox" name="hobby">篮球</p>
    <p><input type="checkbox" name="hobby">足球</p>
    <p><input type="checkbox" name="hobby" checked>双色球</p>

    <select name="" id="">
        <option value="">xxx</option>
        <option value="" selected>yyy</option>
        <option value="">zzz</option>
    </select>
    <p><input type="file"></p>
    <p><input type="button"></p>
    <p><input type="submit"></p>
    <p><input type="reset"></p>

</form>
</body>
</html>

Filter Method

The next element:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

On an element:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

Father element:

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

Sons and brothers elements:

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

Seek

Search for all elements that match the specified expression. This function is to find a good way to descendant elements being processed.

$("div").find("p")

Equivalent to $ ( "div p")

filter

Filter out elements that match the specified expression collection. This method is used to narrow down. Multiple expressions are separated by commas.

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

Equivalent to $ ( "div.c1")

supplement:

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<span>我是div上面的span</span>
<div>我是div
    <span id="s1">我是div里面的第一个span</span>
    <p id="p1">我是div里面的p
        <a href="">我是div里面的p里面的a</a>
    </p>
    <span id="s2">我们div里面的第二个span</span>
    <span id="s3">我们div里面的第二个span</span>
    <span id="s4">我们div里面的第二个span</span>
</div>
<span>我是div下面的第一个span</span>
<span>我是div下面的第二个span</span>

</body>
</html>

Chaining

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquert-3.4.1.js"></script>
</head>
<body>
<p id="p1">p1</p>
<p>p2</p>
<script>

</script>
</body>
</html>

find method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<div>
    <span></span>
    <p><a href=""></a></p>
    <span></span>
    <p></p>
</div>
</body>
</html>

Menu on the left

<!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">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");

    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

左侧菜单栏

Acquiring location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
    <style>
        #p1 {
            position: relative;
            border: 3px solid black;
        }
        #p2 {
            position: absolute;
            top: 100px;
            left: 100px;
            border: 3px solid red;
        }

    </style>
</head>
<body>
<div id="p1">ppp<p id="p2">ppp222</p></div>

</body>
</html>

scroll bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
</body>
</html>

Examples of small rocket

<!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>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jQuery-3.4.1.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回顶部示例

size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
    <style>
        p {
            border: 3px solid red;
            padding: 10px 14px 12px 16px;
            margin: 10px 32px 31px 24px;
        }
    </style>
</head>
<body>

<p>我会p标签</p>
</body>
</html>

Setting a text value tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>


<div>div
    <span>div>span</span>
    <p>div>p
        <a href="">div>p>a</a>
    </p>
    <span>div>span</span>
</div>
</body>
</html>

Obtaining user input box text value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<input type="text">
</body>
</html>

note

注意：
浏览器写的不保存
放再div内部，div里面span便签的上面
点属性是获取属性，点属性=是修改属性（必须是自身有的属性，如果没有就用setattribute）
value: from单中有那么，value值，所以可以便签对象点value(内部文本值)
contain:判断属性是否存在
toggle:属性存在就删除，没有就添加
点击事件onclick，所有标签都可以点（图片，button，link等）
原生的cs对象不可以调用jq的对象 ，var dEle=$('#d1')[0]（jquery对象转原生js对象）;   $(dEle)(原生js对象转jquery对象) 
查找id一定要加#id
$('ul li:not("#d3")');  #里面加双引
k.fn.init(5) [li#1, li#2, li#3, li#4, li#5, prevObject: k.fn.init(1)]
$('div').siblings();
k.fn.init(3) [span, span, span, prevObject: k.fn.init(1)]
兄弟上下都包括
              
$('#p1').css('color','red').next().css('color','blue'); #链式赋值操作
k.fn.init [p, prevObject: k.fn.init(1)]