dom&JavaScript&Jquery
目录
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 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 {
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>
获取焦点事件
<!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 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 {
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>
表单筛选器
属性选择器：
[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 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 {
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>
返回顶部示例
尺寸
<!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)]
dom&JavaScript&Jquery的更多相关文章
- Python 【第八章】：JavaScript 、Dom、jQuery
JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）
-->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）
-->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
随机推荐
- linux下大文件处理
linux下采用先分割后合并的策略处理大文件 第一步:分割文件 split split 参数:-a, --suffix-length=N 指定输出文件名的后缀,默认为2个-b, --bytes ...
- Python知识点汇总
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- tfgan折腾笔记（二）：核心函数详述——gan_model族
定义model的函数有: 1.gan_model 函数原型: def gan_model( # Lambdas defining models. generator_fn, discriminator ...
- mysql数据库笔记0
mysql数据库笔记0 一次性添加多行数据 例如: INSERT INTO students (class_id, name, gender, score) VALUES (1, '大宝', 'M', ...
- Docker实战之Zookeeper集群
1. 概述 这里是 Docker 实战系列第四篇.主要介绍分布式系统中的元老级组件 Zookeeper. ZooKeeper 是一个开源的分布式协调服务,是 Hadoop,HBase 和其他分布式框架 ...
- 大厂面试官最常问的@Configuration+@Bean（JDKConfig编程方式）
大厂面试官最常问的@Configuration+@Bean(JDKConfig编程方式) 现在大部分的Spring项目都采用了基于注解的配置,采用了@Configuration 替换标签的做法.一 ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- H5多列布局
多列布局 基本概念 1.多列布局类似报纸或杂志中的排版方式,上要用以控制大篇幅文本. 2.跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ ...
- 前端每日实战：102# 视频演示如何用纯 CSS 创作一个小和尚
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMmYXp 可交互视频 此视频是可 ...
- Java的三魂七魄 —— 高级多线程
目录 Java的三魂七魄 -- 高级多线程 一.多线程的创建 二.线程安全问题 三.线程通信问题 四.更多实例 1.用线程同步的方法解决单例模式的线程安全问题 2.银行存钱问题(线程安全问题) 3.生 ...