目录
- dom&JavaScript&Jquery
- 建节点
- 添加节点
- 删除节点：
- 替换节点：
- 属性节点
- 获取值操作
- class的操作
- 指定CSS操作
- 操作节点
- 获取input用户输入
- 操作标签类
- 事件
- 常用事件
- 绑定方式：
- 点击事件
- 获取焦点事件
- 定时器案例
- 省市联动
- jquery
- jquery初识
- 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="2
"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.position2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily操作节点
Title
div上面的span
div
div>p
div>span
div>p
div>p>span
div+span
获取input用户输入
Title
操作标签类
Title
事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。绑定方式：
方式一：
点我
注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
方式二：
点我
点击事件
Title
获取焦点事件
Title
定时器案例
Title
- 检查中输入（输入框中直接可以显示内容）
var iEle = document.getElementById('d1');
undefined
var cTime=new Date();
undefined
iEle.value=cTime.toLocaleString();
"2019/6/3 下午4:36:55"
Title
Title
最终版
！！！！！！！！！！
Title
省市联动
Title
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可供测试
Title
div上面的span标签
div
div>p
div>p>span
div>span
span
基本筛选器
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标签
Title
- 书籍1
- 书籍2
- 书籍3
- 书籍4
- 书籍5
jquery操作类属性
Title
表单筛选器
属性选择器：
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于例子：
// 示例
$("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标签
$("input:enabled") // 找到可用的input标签找到被选中的option：
$(":selected") // 找到所有被选中的option
Title
筛选器方法
下一个元素：
$("#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() // 索引值等于指定值的元素
Title
我是div上面的span
我是div下面的第一个span
我是div下面的第二个span
链式操作
Title
p1
p2
find方法
Title
左侧菜单
左侧菜单示例
左侧菜单栏获取位置
Title
pppppp222
滚动条
Title
小火箭示例
位置相关示例之返回顶部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
返回顶部示例尺寸
Title
我会p标签
给标签设置文本值
Title
获取用户输入框的文本值
Title
注意
注意：
浏览器写的不保存
放再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)]