zoukankan html css js c++ java

dom&JavaScript&Jquery

建节点

语法：

createElement(标签名)

示例：

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

添加节点

语法：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

示例：

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);

删除节点：

语法：

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点：

语法：

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值：

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

设置文本节点的值：

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

attribute操作

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

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

获取值操作

语法：

elementNode.value

适用于以下标签：

.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的操作

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

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

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

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

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

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

操作节点

<!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>

获取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>

操作标签类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
             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>

事件

常用事件

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

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

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

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

绑定方式：

方式一：

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

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

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

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
             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>

获取焦点事件

<!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>

定时器案例

<!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>

检查中输入（输入框中直接可以显示内容）

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

![](C:Users鸭鸭PicturesSaved Pictures批注 2019-06-03 164434.png)

<!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>

省市联动

<!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初识

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

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

jquery基本选择器

基本选择器

id选择器：

$("#id")

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

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

所有元素选择器：

$("*")

组合选择器：

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

层级选择器：

x和y可以为任意选择器

$("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>

基本筛选器

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

例子：

$("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>

jquery操作类属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
    <style>
        .c1 {
             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>

表单筛选器

属性选择器：

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

例子：

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

表单筛选器：

:text
:password
:file

:radio
:checkbox

:submit
:reset
:button

例子：

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

表单对象属性:

:enabled
:disabled
:checked
:selected

例子：

找到可用的input标签

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

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

找到被选中的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>

筛选器方法

下一个元素：

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

上一个元素：

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

父亲元素：

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

儿子和兄弟元素：

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

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

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

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

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

等价于 $("div.c1")

补充：

.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>

链式操作

<!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方法

<!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>

左侧菜单

<!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;
       20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
       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>

左侧菜单栏

获取位置

<!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>

滚动条

<!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>

小火箭示例

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

    .c2 {
      height: 50px;
       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>

返回顶部示例

尺寸

<!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>

给标签设置文本值

<!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>

获取用户输入框的文本值

<!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>

注意

注意：
浏览器写的不保存
放再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)]

查看全文

相关阅读:
行为的封装
 分页功能-----》链表实现
 python入门教程链接
 作用域属性链接存储类型
 Codeforces Round #598 (Div. 3)
CCPC2018-湖南全国邀请赛
 【洛谷P2494】 [SDOI2011]保密（分数规划+最小割）
【洛谷P3329】 [ZJOI2011]最小割（最小割树）
【BZOJ3716】[PA2014]Muzeum（贪心+网络流）
【洛谷P4542】 [ZJOI2011]营救皮卡丘（费用流）

原文地址：https://www.cnblogs.com/huangxuanya/p/10982934.html