1.JQuery的使用
引入CSS文件
<link rel="stylesheet" type="text/css" href="../css/main.css" />
引入jquery文件
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
2.选择器类型
首先声明的页面结构
<body>
<input type="text" id="t1" class="i1" placeholder="文本框1"/>
<input type="text" id="t2" placeholder="文本框2"/>
<div>
<p>第一级p标签</p>
<span>
<p>第二级p标签</p>
</span>
</div>
<input type="password" id="p1" placeholder="密码框1"/>
<input type="button" value="测试" onclick="test();"/>
</body>
页面包括两个文本框
一个<div分区>,子类一级标签p
span标签类中的标签p
密码输入框 以及测试按钮
2.1 ID选择器
var v = $("#t1").val();
根据id属性选择,并获取对应值
2.2 class选择器
var v = $(".i1").val();
根据所属类选择,并获取其对应值
2.3 标签选择器
var arr = [];
arr = $("input");//获取所有input标签对象
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
根据其(input,div等)标签进行选择,因为返回的事所有标签(input)相同的对象,所以应该使用数组进行存储。
2.4 属性选择器
获取所有type属性=password的input标签对象
var v = $("input[type=password]").val();
console.info(v);
根据其type属性进行选择,返回type属性均相等的对象(如均为button,password等)。
2.5 层次选择器
5.1 后代选择器$(“M N”)
选择M元素内部的所有后代元素N(所有后代儿子孙子啥的都算)
var content = $("div p").text();
5.2 子代选择器$(“M>N”)
选择M元素内部第一级的子代元素(只有儿子)
var content = $("div>p").text();
5.3 兄弟选择器$(“M~N”)
选择M元素后所有同级的N元素(兄弟姐妹同一辈的都算)
var arr = [];
arr = $("div~input");
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
5.4 相邻选择器$(“M+N”)
选择M元素相邻的下一个元素N(M元素与N元素平级)
var arr = [];
arr = $("div+input")
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
3.伪类选择器
界面类型
<body>
<span id="aspan">123123</span>
<div id="d">
<input type="text" id="t1" value="a" disabled="disabled"/>
<br>
<input type="text" id="t2" value="b" readonly="readonly" />
<br>
<input type="text" id="t3" value="c" />
<br>
<input type="text" id="t4" value="d" />
<br>
<input type="text" id="t5" value="e" />
<br>
</div>
<div>
<input type="checkbox" name="city" value="1">北京
<input type="checkbox" name="city" value="2">上海
<input type="checkbox" name="city" value="3">广州
<!-- 上传文件控件 -->
<input type="file" id="file1" />
<select>
<option value="a">济南</option>
<option value="b">青岛</option>
<option value="c">德州</option>
</select>
</div>
<input type="submit" value="提交按钮"/>
<button onclick="test();" value="123" >测试</button>
</body>
类型总结
jquery中常见的伪类选择器有6种:
1 简单伪类选择器
2 子元素伪类选择器
3 可见性伪类选择器
4 内容伪类选择器
5 表单伪类选择器
6 表单属性伪类选择器
仅作重点介绍
3.1 简单伪类选择器
:first 选择某元素的第一个元素对象
:last 选择某元素的最后一个元素对象
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素,索引值index是一个整数,从0开始
var arr = [];
arr = $("input:eq(4)")
for(var i = 0; i < arr.length; i++){
console.info(arr[i].value);
}
3.3 可见性伪类选择器
:hidden 选取所有不可见的元素
:visible 选取所有可见元素
var arr = [];
arr = $(":visible");
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].id);
}
3.5 表单伪类选择器
:input 选择所有input元素,示例:$(":input")
:button 选择所有普通按钮,即type="button"的input元素或button元素
:submit 选择所有提交按钮
:reset 选择所有重置按钮
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域
3.6 表单属性伪类选择器
:checked 选择所有被选中的表单元素,一般用于radio和checkbox ,示例:$(":checkbox:checked");
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素,一般用于input/select/textarea
:disabled 选择所有不可用元素,一般用于input/select/textarea
:read-only 选择所有只读元素,一般用于input/textarea
:focus 选择获得焦点的元素
var arr = [];
// arr = $("input[type=text]:read-only");
arr = $(":focus");
for (var i = 0; i < arr.length; i++) {
console.info(arr[i].value);
}
4 JQuery对属性标签的操作
界面情况
<body>
<input type="text" id="i1" value=""/>
<div style="border: 1px solid black;" >
<p id="p1" align="left">hello<br>world</p>
</div>
<button onclick="test();">按钮</button>
</body>
4.1 获取(查)、设置(改)标签属性
一般在jquery中,方法既能set也能get
4.1.1 attr()常规标签属性操作方法
获取指定属性值,如果没有该属性返回undefined
var a = $("#p1").attr("color");
添加/更改属性值
$("#i1").attr("value","1");
获取标签对象的value属性值
console.info($("#i1").val());
4.1.2 prop()表单属性操作方法
var v = $("#i1").prop("value");
console.info(v);
表单元素属性赋值
$("#i1").prop("value","你好");
4. 2 CSS样式属性修改
添加class属性值
$("#p1").addClass("p_class p_class2");//p.class = ?
删除class属性值
$("#p1").removeClass("p_class2");
获取(查)、设置(改)CSS
var b = $("div").css("border");
设置CSS样式
$("div").css("width","50%");
设置多个CSS属性值
$("div").css({
"width":"50%",
"height":"100px",
"background-color":"orange"
});
4.3 标签文本操作
查询标签本文内容
var tx = $("p").text();
console.info(tx);
var ht = $("p").html();
console.info(ht);
设置标签文本内容
var c = $("p").html();
$("p").html(c+"123");
4.4 获取、设置尺寸
$("div").height(10);
$("div").width(600);