javascript-使用JQuery导航无根dom

25-02-24 13

针对javascript-使用JQuery导航无根dom这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展dom&JavaScript&Jquery、javascript–Chrome使用jqu

针对javascript-使用JQuery导航无根dom这个问题，本篇文章进行了详细的解答，同时本文还将给你拓展dom&JavaScript&Jquery、javascript – Chrome使用jquery检查元素、javascript – 使用jQuery mobile ajax导航加载多页面模板、javascript – 使用jQuery从DOM中删除HTML元素等相关知识，希望可以帮助到你。

本文目录一览：

javascript-使用JQuery导航无根dom
dom&JavaScript&Jquery
javascript – Chrome使用jquery检查元素
javascript – 使用jQuery mobile ajax导航加载多页面模板
javascript – 使用jQuery从DOM中删除HTML元素

javascript-使用JQuery导航无根dom

给定这个html字符串：

var string = "<div></div><p></p>";

我用它创建一个jQuery对象：

var dom = $(string);

有没有机会使用选择器指向其标签之一？当然,如果不将其全部嵌入到新创建的数据库中.

dom.find("p");// []

解决方法:

如果没有根元素,则需要使用filter()来获取顶级元素：

var string = "<div></div><p></p>";
var $dom = $(string).appendTo('body'); // appendTo() is only for purposes of this demo
$dom.filter("p").text('Hello World!');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

dom&JavaScript&Jquery

dom&JavaScript&Jquery
- 建节点
- 添加节点
- 删除节点：
- 替换节点：
- 属性节点
- 获取值操作
- class的操作
- 指定CSS操作
- 操作节点
- 获取input用户输入
- 操作标签类
- 事件
  - 常用事件
  - 绑定方式：
- 点击事件
- 获取焦点事件
- 定时器案例
- 省市联动
jquery
- @L_301_20@
- jquery基本选择器
  - 基本选择器
  - 层级选择器：
- 基本筛选器
- jquery操作类属性
- 表单筛选器
  - 属性选择器：
  - 表单筛选器：
- 筛选器方法
- 链式操作
- find方法
- 左侧菜单
- 获取位置
- 滚动条
- 小火箭示例
- 尺寸
- 给标签设置文本值
- 获取用户输入框的文本值
- 注意

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 {
            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></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 {
            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></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"

<!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>div上面的span标签</span>
<div id="d1">div
    <p>div>p
        <span>div>p>span</span>
    </p>
    <span id="d3">div>span</span>
</div>
<span>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 {
            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></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;
      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>
  <div>
    <div>
      <div>菜单一</div>
      <div>
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
    </div>
    <div>
      <div>菜单二</div>
      <div>
      <div>111</div>
      <div>222</div>
      <div>333</div>
    </div>
    </div>
    <div>
      <div>菜单三</div>
      <div>
      <div>111</div>
      <div>222</div>
      <div>333</div>
    </div>
    </div>
  </div>
</div>
<div></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></div>
<div></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 {
      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">点我</button>
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>
<div>51</div>
<div>52</div>
<div>53</div>
<div>54</div>
<div>55</div>
<div>56</div>
<div>57</div>
<div>58</div>
<div>59</div>
<div>60</div>
<div>61</div>
<div>62</div>
<div>63</div>
<div>64</div>
<div>65</div>
<div>66</div>
<div>67</div>
<div>68</div>
<div>69</div>
<div>70</div>
<div>71</div>
<div>72</div>
<div>73</div>
<div>74</div>
<div>75</div>
<div>76</div>
<div>77</div>
<div>78</div>
<div>79</div>
<div>80</div>
<div>81</div>
<div>82</div>
<div>83</div>
<div>84</div>
<div>85</div>
<div>86</div>
<div>87</div>
<div>88</div>
<div>89</div>
<div>90</div>
<div>91</div>
<div>92</div>
<div>93</div>
<div>94</div>
<div>95</div>
<div>96</div>
<div>97</div>
<div>98</div>
<div>99</div>
<div>100</div>

<button id="b2">返回顶部</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,prevObject: k.fn.init(1)]
兄弟上下都包括
              
$('#p1').css('color','red').next().css('color','blue'); #链式赋值操作
k.fn.init?[p,prevObject: k.fn.init(1)]

javascript – Chrome使用jquery检查元素

我想创建类似于chrome的devtools中的inspect dom功能的东西
当onhover a – 预设的doms列表 – 在dom顶部创建一个div.shadow,覆盖它的宽度/高度相同,当鼠标离开阴影时隐藏它或者如果新的选定dom悬停,它会改变位置和尺寸,

dom.mouSEOver(function(e) {
  shadow.css({
    display: "block",width: dom.width+"px",height: dom.height+"px",top: dom.top+"px",left: dom.left+"px"
  });
});

shadow.mouseleave(function() {
  $(this).css('display','none');
});;

但是在选定的dom列表中有父母/子女如“身体”时会出现问题
它将阴影放在身体上然后忽略来自儿童的任何鼠标悬停/鼠标中心

最佳答案

经过测试并完全正常工作

var shadow = $('display: "block",width: dom[0].offsetWidth +"px",height: dom[0].offsetHeight +"px",top: dom.position().top +"px",left: dom.position().left +"px"
   });

   shadow.show();
});

javascript – 使用jQuery mobile ajax导航加载多页面模板

默认情况下,如果您使用jQuery Mobile的ajax导航来加载多页面模板html文件,它将无法正常工作,只会加载第一页.

一种方法是使用rel =“external”,但它在手机或平板电脑中效果不佳……(它应该有动画！)

有没有更好的方法？如何使用jQuery Mobile ajax导航完全加载多页模板html？

解决方法:

您可以使用编程方式将页面加载到DOM中

pageContainerElement.page({ domCache: true });

DOM缓存的缺点是DOM会变得非常大,导致某些设备出现速度减慢和内存问题.如果启用DOM缓存,请注意自己管理DOM并在一系列设备上进行彻底测试.

这是链接：http://jquerymobile.com/test/docs/pages/page-cache.html

更新1

您可以将该代码放在一个单独的文件中,即custom-code.js,并在加载jQuery之后将其放入标题中,但是在加载jQuery Mobile之前.

因此,如果您的页面容器如下所示：

<div data-role="page" data-theme="a" data-dom-cache="false">

你会把div.page({domCache：true});然后在你拉入jQuery和jQuery mobile的所有页面的头部,它看起来像这样：

// Pull in jQuery
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Pull in your custom jQuery Mobile rules/scripts
<script src="../path/to-file/custom-code.js"></script>
// Pull in jQuery Mobile
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

更新2

上面的代码将缓存该特定页面.如果要将所有页面加载到DOM中,在custom-code.js文件中,请放置此代码并为要加载到DOM中的每个页面单独指定(每个页面一个实例)：

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

Prefetching pages naturally creates additional HTTP requests and uses
bandwidth, so it’s wise to use this feature only in situations where
it’s highly likely that the prefetched page will be visited.

此外,如果要预先获取当前页面上链接的所有页面,只需将数据预取添加到链接即可.

例如：

<a href="page_2.html" data-prefetch>Link to other page</a>

javascript – 使用jQuery从DOM中删除HTML元素

我正在使用api来获取要附加到DOM的值,我将它们附加到< tr>标签.我的问题是每次关闭模态并重新打开表格,值仍然存在,以及手风琴上的“userCurrency”.关闭模态时如何删除这些元素？

这是我的HTML

 <!-- currency select -->
<label>
    <span>Pick a currency</span>
      <select id="userCurrency"https://www.jb51.cc/tag/dis/" target="_blank">display: inline; width: auto; vertical-align: inherit;">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option>JPY</option>
    <option>GBP</option>
    <option>CHF</option>
    <option>CAD</option>
    <option>AUD</option>
    <option>MXN</option>
    <option>CNY</option>
    <option>NZD</option>
    <option>SEK</option>
    <option>RUB</option>
    <option>HKD</option>
    <option>NOK</option>
    <option>SGD</option>
    <option>TRY</option>
    <option>KRW</option>
    <option>ZAR</option>
    <option>BRL</option>
    <option>INR</option>
  </select>
</label>
<!-- select end -->
       <a id="btn"href="#modal1">Bitcoin information</a>
       <a id="btn"href="#modal2">Help</a>
      </div>
    </div>
  </div>
<!-- Modal Structure -->
  <div id="modal1">
    <div>
      <uldata-collapsible="accordion">
    <li>
      <div id="currencylabel"></div>
      <div id="cbody">
      <table id="theTable">
          <thead>
            <tr>
           <td>Volume</td>
           <td>Latest</td>
           <td>Bid</td>
           <td>High</td>
            </tr>
          </thead>
        <tbody></tbody>
      </table>
      </ul>
    </div>
    </div>
    </div>

这是我的javascript

$(".btn").on("click", function(){
    var userCurrency = $('#userCurrency option:selected').text();
    $("#currencylabel").append(userCurrency);
    $.ajax({
      type: "GET",
      url: bitcoinApiUrl,
      dataType: "json",
      success: function(currency) {
        // loop through currency
        for (var i = 0; i < currency.length; i++) 
        {
          if(currency[i].currency == userCurrency)
          {
              var $tr = $("<tr/>");
              $tr.append( $("<td />").text(currency[i].volume) );
              $tr.append( $("<td />").text(currency[i].latest_Trade) );
              $tr.append( $("<td />").text(currency[i].bid) );
              $tr.append( $("<td />").text(currency[i].high) );

              $("#theTable tbody").append($tr);

          }
        }
      }
      });
    });
  });

$('#modal1').on('hidden', function () {
    $(".hello").remove();
})

模态代码

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

解决方法:

我检查了leanModal.js的文件;该插件不会触发此类事件来检测已隐藏的模态.因此,您需要为此做一个解决方法,将.remove()移动到click事件上.

$(".btn").on("click", function(){
   if($(".hello").length > 0) $(".hello").remove(); 
   // rest of click handler
});

今天关于javascript-使用JQuery导航无根dom的介绍到此结束，谢谢您的阅读，有关dom&JavaScript&Jquery、javascript – Chrome使用jquery检查元素、javascript – 使用jQuery mobile ajax导航加载多页面模板、javascript – 使用jQuery从DOM中删除HTML元素等更多相关知识的信息可以在本站进行查询。

本文标签：