一、DOM 对象和 jQuery 包装集对象
1.Dom对象
var divDom = document.getElementById("mydiv");
console.log(divDom);
2.Jquery包装集对象
var divJquery = $("#mydiv");
console.log(divJquery);
3.Dom对象与Jquery对象的互相转换
var domToJquery = $(divDom);
console.log(domToJquery);
二、基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
</head>
<body>
<div id="div1" class="test">div2</div>
<div id="div1">div1</div>
<div class="test">div3</div>
<div>div4</div>
<p class="test">这是一个P</p>
<span class="test">这是一个span</span>
</body>
<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
1、ID选择器 格式：$("#id属性值")
获取指定id值的对象(只会获取到第一个id的值)
var div1 = $("#div1");
console.log(div1);
2、类选择器 格式：$(".class属性值")
获取所有指定class属性值的元素
var cls = $(".test");
console.log(cls);
3、元素选择器 格式：$("元素名/标签名")
获取所有指定标签名的元素
var divs = $("div");
console.log(divs);
4、通用选择器 格式：$("*")
获取所有的元素的对象
var all = $("*");
console.log(all);
5、组合选择器 格式：$("选择器1,选择器2...")
var group = $("#div1,span,.test");
console.log(group);
</script>
</html>
三、层次选择器
| 后代选择器 | ancestor descendant $("#parent div")选择id为parent的元素的所有div元素 |
|---|---|
| 子代选择器 | parent > child $("#parent>div")选择id为parent的直接div子元素 |
| 相邻选择器 | prev + next $(".blue + img")选择css类为blue的下一个img元素 |
| 同辈选择器 | prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元 |
| 素 |
四、表单选择器
| 表单元 素 | 文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select |
|---|---|
| 非表单元素 | div、span、p、h1~h6、img、a、table |
var inputs = $(":input"); // 表单选择器，所有表单元素
console.log(inputs.length);
var inputs2 = $("input"); //元素选择器
console.log(inputs2.length);
五、过滤器选择器
<body>
爱好:<input type="checkbox" name="ufav" value="篮球" checked="checked"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码" checked="checked"/>代码
<input type="checkbox" name="ufav" value="爬床1"/>爬床1
<input type="checkbox" name="ufav" value="代码1" checked="checked"/>代码1<br />
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"
:even 选择每个相隔的（偶数） 元素
*/
1.:checked 选择所有被选中的元素
var checkboxs = $(":checkbox");
checkboxs.each(function(){
console.log(this);
console.log(this.checked);});
console.log("==============");
var ckeckeds = $(":checkbox:checked");
ckeckeds.each(function(){
console.log(this);});
2.:eq(index) 匹配指定下标的元素
var second = $(":checkbox:eq(1)")
second.each(function(){
console.log(this);});
3.:gt(index) 匹配下标大于指定值的所有元素
console.log("==============");
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
console.log(this);});
4.:odd 选择每个相隔的（奇数） 元素
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);});
5.:even 选择每个相隔的（偶数） 元素
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);});
</script>
六、(1)操作表单元素
1)操作表单元素
1. 获取属性的值
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked')
attr('name')
prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
2. 设置属性的值
attr(属性名称,属性值);
prop(属性名称,属性值);
3. 移除属性
removeAttr(属性名) 移除指定的属性 removeAttr('checked')
(2)操作元素的样式
| attr(“class”) | 获取class属性的值，即样式名称 |
|---|---|
| attr(“class”,”样式名”) | 修改class属性的值，修改样式 |
| addClass(“样式名”) | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
<script type="text/javascript">
/* attr */
// 设置元素的class属性（如果属性不存在，则添加属性）
$("#conRed").attr("class","red");
// 如果属性存在，则修改属性值
$("#conBlue").attr("class","green");
// addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
$("#conRed").addClass("larger");
// css()
// 添加一个具体样式 css("样式名","样式值")
$("#remove").css("color","red");
// 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
$("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})
</script>
(3)操作元素内容
| html() | 获取元素的html内容 |
|---|---|
| html(“html,内容”) | 获取元素的html内容 |
| text() | 获取元素的文本内容，不包含html |
| text (“text 内容”) | 设置元素的文本内容，不包含html |
| val() | 获取元素value值 |
| val(‘值’) | 设定元素的value值 |
<script type="text/javascript">
// 设置（非表单）元素的内容
// 包含的html标签
$("#html").html("<h3>上海</h3>");
// $("#html").html("上海");
// 不包含html标签,只能设置纯文本
$("#text").text("<h3>上海</h3>");
$("#text").text("上海");
// 设置表单元素的值
$("input").val("Hello");
// 获取元素的值
console.log($("#getHtml").html());
console.log($("#getHtml").text());
console.log($("input").val());
</script>
(4)添加元素
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部
before()
在元素前插入指定的元素或内容:$(selector).before(content)
after()
在元素后插入指定的元素或内容:$(selector).after(content)
<script type="text/javascript">
// 父元素
var parent = $("#parent");
// 要追加的内容
var span = $('<span class="pink">女神</span>');
// 前追加 （追加的都是子元素）
// prepend(content)
parent.prepend(span);
// $(content).prependTo(selector)
$(".blue").prependTo(parent);
// 后追加（追加的都是子元素）
var singer = '<span class="green">歌手</span>';
// append(content)
// parent.append(singer);
// $(content).appendTo(selector)
$(singer).appendTo(parent);
// 插入同级元素
// $(selector).before(content)
$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
// $(selector).after(content)
$("#xxr").after("<div class='red'><span>老腊肉</span></div>");
</script>
七 事件
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<!--button元素，默认是提交按钮-->
<button type="button" id="btn">按钮</button>
<input type="text" id="txt" value="Hello Jquery" />
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
1.bind()绑定事件
/*$("#btn").bind("click",function(){
alert('这是个按钮。。。');
});*/
2.直接绑定事件
$("#btn").click(function(){
alert('这是个按钮。。。');
});
3.绑定多个事件
// 聚焦失焦事件
// 方式一：
$("#txt").focus(function(){
// 聚焦时清空文本框
$("#txt").val("");
}).blur(function(){
$("#txt").val("你好");
});
4.多个事件绑定一种行为
//第一种
$("#txt").bind("focus",function(){
console.log("aaa");
}).bind("blur",function(){
console.log("bbb");
});
//第二种
$("#txt").bind({
focus:function(){
console.log("链式编程1");
},
blur:function(){
console.log("链式编程2");
}
});
</script>
</html>
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
