dom&JavaScript&Jquery

喜欢说两句的猫依漓漓 發表於 2019-6-6 07:28:00

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>dom&JavaScript&Jquery<ul><li><ul><li>建节点</li><li>添加节点</li><li>删除节点：</li><li>替换节点：</li><li>属性节点</li><li>获取值操作</li><li>class的操作</li><li><strong>指定CSS操作</strong></li></ul></li><li>操作节点</li><li>获取input用户输入</li><li>操作标签类</li><li>事件<ul><li>常用事件</li><li>绑定方式：</li></ul></li><li>点击事件</li><li>获取焦点事件</li><li>定时器案例</li><li>省市联动</li></ul></li><li>jquery<ul><li>jquery初识</li><li>jquery基本选择器<ul><li>基本选择器</li><li><strong>层级选择器：</strong></li></ul></li><li>基本筛选器</li><li>jquery操作类属性</li><li>表单筛选器<ul><li><strong>属性选择器：</strong></li><li><strong>表单筛选器</strong>：</li></ul></li><li>筛选器方法</li><li>链式操作</li><li>find方法</li><li>左侧菜单</li><li>获取位置</li><li>滚动条</li><li>小火箭示例</li><li>尺寸</li><li>给标签设置文本值</li><li>获取用户输入框的文本值</li><li>注意</li></ul></li></ul></div><p></p>
<h1 id="domjavascriptjquery">dom&JavaScript&Jquery</h1>
<h3 id="建节点">建节点</h3>
<p>语法：</p>
<p>createElement(标签名)</p>
<p>示例：</p>
<pre><code>var divEle = document.createElement("div");
</code></pre>
<h3 id="添加节点">添加节点</h3>
<p>语法：</p>
<p>追加一个子节点（作为最后的子节点）</p>
<p>somenode.appendChild(newnode)；</p>
<p>把增加的节点放到某个节点的前边。</p>
<p>somenode.insertBefore(newnode,某个节点);</p>
<p>示例：</p>
<pre><code>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);
</code></pre>
<h3 id="删除节点">删除节点：</h3>
<p>语法：</p>
<p>获得要删除的元素，通过父元素调用该方法删除。</p>
<p>somenode.removeChild(要删除的节点)</p>
<h3 id="替换节点">替换节点：</h3>
<p>语法：</p>
<p>somenode.replaceChild(newnode, 某个节点);</p>
<h3 id="属性节点">属性节点</h3>
<p>获取文本节点的值：</p>
<pre><code>var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
</code></pre>
<p>设置文本节点的值：</p>
<pre><code>var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
</code></pre>
<p><strong>attribute操作</strong></p>
<pre><code>var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
</code></pre>
<h3 id="获取值操作">获取值操作</h3>
<p>语法：</p>
<p>elementNode.value</p>
<p>适用于以下标签：</p>
<ul>
<li>.input</li>
<li>.select</li>
<li>.textarea</li>
</ul>
<pre><code>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);
</code></pre>
<h3 id="class的操作">class的操作</h3>
<pre><code>className获取所有样式类名(字符串)

classList.remove(cls)删除指定类
classList.add(cls)添加类
classList.contains(cls)存在返回true，否则返回false
classList.toggle(cls)存在就删除，否则添加
</code></pre>
<h3 id="指定css操作"><strong>指定CSS操作</strong></h3>
<pre><code>obj.style.backgroundColor="red"
</code></pre>
<p>JS操作CSS属性的规律：</p>
<p>1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：</p>
<pre><code>obj.style.margin
obj.style.width
obj.style.left
obj.style.position
</code></pre>
<p>2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：</p>
<pre><code>obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
</code></pre>
<h2 id="操作节点">操作节点</h2>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="获取input用户输入">获取input用户输入</h2>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="操作标签类">操作标签类</h2>
<pre><code class="language-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 class="c1 bg_red bg_green"></div>
</body>
</html>
</code></pre>
<h2 id="事件">事件</h2>
<h3 id="常用事件">常用事件</h3>
<pre><code>onclick    当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

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

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

onselect    在文本框中的文本被选中时发生。
onsubmit    确认按钮被点击，使用的对象是form。
</code></pre>
<h3 id="绑定方式">绑定方式：</h3>
<p>方式一：</p>
<pre><code><div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
</code></pre>
<p>注意：</p>
<p>this是实参，表示触发事件的当前元素。</p>
<p>函数定义过程中的ths为形参。</p>
<p>方式二：</p>
<pre><code><div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
</code></pre>
<h2 id="点击事件">点击事件</h2>
<pre><code class="language-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 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');
   dEle.classList.toggle('bg_green')
}

</script>
</body>
</html>
</code></pre>
<h2 id="获取焦点事件">获取焦点事件</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="定时器案例">定时器案例</h2>
<pre><code class="language-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>
</code></pre>
<ul>
<li>检查中输入（输入框中直接可以显示内容）</li>
</ul>
<p>var iEle = document.getElementById('d1');<br>
undefined<br>
var cTime=new Date();<br>
undefined<br>
iEle.value=cTime.toLocaleString();<br>
"2019/6/3 下午4:36:55"</p>
<p>![](C:\Users\鸭鸭\Pictures\Saved Pictures\批注 2019-06-03 164434.png)</p>
<pre><code class="language-html"><!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>
</code></pre>
<pre><code class="language-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>
</code></pre>
<pre><code class="language-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 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>
</code></pre>
<h2 id="省市联动">省市联动</h2>
<pre><code class="language-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;
   // for循环创建option标签添加到cityEle标签内
   for (let i=0;i<cityList.length;i++){
         // 创建option标签并添加文本
         let cEle = document.createElement('option');
         // 给option标签设置文本值
         cEle.innerText = cityList;
         // 将生成的option标签添加到proEle中
         cityEle.appendChild(cEle)
   }
}

</script>
</body>
</html>
</code></pre>
<h1 id="jquery">jquery</h1>
<h2 id="jquery初识">jquery初识</h2>
<p><strong>jQuery对象</strong>就是通过jQuery包装DOM对象后产生的对象。<strong>jQuery对象</strong>是 jQuery独有的。如果一个对象是 <strong>jQuery对象</strong>，那么它就可以使用<strong>jQuery</strong>里的方法：例如$(“#i1”).html()。</p>
<p><code>$("#i1").html()</code>的意思是：获取id值为 <code>i1</code>的元素的html代码。其中 <code>html()</code>是jQuery里的方法。</p>
<p>相当于： <code>document.getElementById("i1").innerHTML;</code></p>
<p>虽然 <code>jQuery对象</code>是包装 <code>DOM对象</code>后产生的，但是 <code>jQuery对象</code>无法使用 <code>DOM对象</code>的任何方法，同理 <code>DOM对象</code>也没不能使用 <code>jQuery</code>里的方法。</p>
<p>一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：</p>
<pre><code>var $variable = jQuery对像
var variable = DOM对象
$variable//jQuery对象转成DOM对象
</code></pre>
<h2 id="jquery基本选择器">jquery基本选择器</h2>
<h3 id="基本选择器">基本选择器</h3>
<p><strong>id选择器：</strong></p>
<pre><code>$("#id")
</code></pre>
<p><strong>标签选择器：</strong></p>
<pre><code>$("tagName")
</code></pre>
<p><strong>class选择器：</strong></p>
<pre><code>$(".className")
</code></pre>
<p><strong>配合使用：</strong></p>
<pre><code>$("div.c1")// 找到有c1 class类的div标签
</code></pre>
<p><strong>所有元素选择器：</strong></p>
<pre><code>$("*")
</code></pre>
<p><strong>组合选择器：</strong></p>
<pre><code>$("#id, .className, tagName")
</code></pre>
<h3 id="层级选择器"><strong>层级选择器：</strong></h3>
<p><em>x和y可以为任意选择器</em></p>
<pre><code>$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
</code></pre>
<pre><code class="language-html">可供测试
<!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>
</code></pre>
<h2 id="基本筛选器">基本筛选器</h2>
<pre><code>first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
</code></pre>
<p><strong>例子：</strong></p>
<pre><code>$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
</code></pre>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="jquery操作类属性">jquery操作类属性</h2>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="表单筛选器">表单筛选器</h2>
<h3 id="属性选择器"><strong>属性选择器：</strong></h3>
<pre><code>
// 属性等于
// 属性不等于
</code></pre>
<p><strong>例子：</strong></p>
<pre><code>// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input");// 取到checkbox类型的input标签
$("input");// 取到类型不是text的input标签
</code></pre>
<h3 id="表单筛选器-1"><strong>表单筛选器</strong>：</h3>
<pre><code>:text
:password
:file
</code></pre>
<pre><code>:radio
:checkbox

:submit
:reset
:button
</code></pre>
<p><strong>例子：</strong></p>
<pre><code>$(":checkbox")// 找到所有的checkbox
</code></pre>
<p>表单对象属性:</p>
<pre><code>:enabled
:disabled
:checked
:selected
</code></pre>
<p><strong>例子：</strong></p>
<p>找到可用的input标签</p>
<pre><code><form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>

$("input:enabled")// 找到可用的input标签
</code></pre>
<p>找到被选中的option：</p>
<pre><code><select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>

$(":selected")// 找到所有被选中的option
</code></pre>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="筛选器方法">筛选器方法</h2>
<p>下一个元素：</p>
<pre><code>$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
</code></pre>
<p>上一个元素：</p>
<pre><code>$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
</code></pre>
<p>父亲元素：</p>
<pre><code>$("#id").parent()
$("#id").parents()// 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
</code></pre>
<p>儿子和兄弟元素：</p>
<pre><code>$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
</code></pre>
<p>查找</p>
<p>搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。</p>
<pre><code>$("div").find("p")
</code></pre>
<p>等价于$("div p")</p>
<p>筛选</p>
<p>筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。</p>
<pre><code>$("div").filter(".c1")// 从结果集中过滤出有c1样式类的
</code></pre>
<p>等价于 $("div.c1")</p>
<p>补充：</p>
<pre><code>.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
</code></pre>
<pre><code class="language-html"><!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>
</code></pre>
<h2 id="链式操作">链式操作</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="find方法">find方法</h2>
<pre><code class="language-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>
<span></span>
<p><a href=""></a></p>
<span></span>
<p></p>
</div>
</body>
</html>
</code></pre>
<h2 id="左侧菜单">左侧菜单</h2>
<pre><code class="language-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 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>

左侧菜单栏
</code></pre>
<h2 id="获取位置">获取位置</h2>
<pre><code class="language-HTML"><!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>
</code></pre>
<h2 id="滚动条">滚动条</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="小火箭示例">小火箭示例</h2>
<pre><code class="language-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" 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>

返回顶部示例
</code></pre>
<h2 id="尺寸">尺寸</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="给标签设置文本值">给标签设置文本值</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="获取用户输入框的文本值">获取用户输入框的文本值</h2>
<pre><code class="language-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>
</code></pre>
<h2 id="注意">注意</h2>
<pre><code class="language-python">注意：
浏览器写的不保存
放再div内部，div里面span便签的上面
点属性是获取属性，点属性=是修改属性（必须是自身有的属性，如果没有就用setattribute）
value: from单中有那么，value值，所以可以便签对象点value(内部文本值)
contain:判断属性是否存在
toggle:属性存在就删除，没有就添加
点击事件onclick，所有标签都可以点（图片，button，link等）
原生的cs对象不可以调用jq的对象，var dEle=$('#d1')（jquery对象转原生js对象）; $(dEle)(原生js对象转jquery对象)
查找id一定要加#id
$('ul li:not("#d3")');#里面加双引
k.fn.init(5) 
$('div').siblings();
k.fn.init(3) 
兄弟上下都包括

$('#p1').css('color','red').next().css('color','blue'); #链式赋值操作
k.fn.init 

</code></pre><br><br>
来源：https://www.cnblogs.com/huangxuanya/p/10982934.html

頁: [1]

琼殿技术论坛's Archiver

dom&JavaScript&Jquery