jquery简单入门

jquery简单入门
页面加载时加载 相当于 onload 感觉
$(document).ready(function(){

})
简写：
$(function(){

});

js对象转换成JQ对象
$（js对象）
JQ对象---->js对象
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").get(0) …("#id")—JQ对象
或者 $("#id")[0]
选择器类型
id选择器 ${“#id”}
标签选择器
#{‘input [name=“zhi”]:checked’}

类选择器
${.class}

1. 获取单个checkbox选中项(三种写法)：
   $(“input:checkbox:checked”).val()
   或者
   $(“input:[type=‘checkbox’]:checked”).val();
   或者
   $(“input:[name=‘ck’]:checked”).val();

2. 获取多个checkbox选中项：
   KaTeX parse error: Expected '}', got 'EOF' at end of input: …tion() { if ((this).attr(‘checked’) ==true) {
   alert($(this).val());
   }
   });

3. 设置第一个checkbox 为选中值：
   $(‘input:checkbox:first’).attr(“checked”,‘checked’);
   或者
   $(‘input:checkbox’).eq(0).attr(“checked”,‘true’);

4. 设置最后一个checkbox为选中值：
   $(‘input?last’).attr(‘checked’, ‘checked’);
   或者
   $(‘input?last’).attr(‘checked’, ‘true’);

5. 根据索引值设置任意一个checkbox为选中值：
   $('input:checkbox).eq(索引值).attr(‘checked’, ‘true’);索引值=0,1,2…
   或者
   $(‘input:radio’).slice(1,2).attr(‘checked’, ‘true’);

6. 选中多个checkbox：
   同时选中第1个和第2个的checkbox：
   $(‘input:radio’).slice(0,2).attr(‘checked’,‘true’);

7. 根据Value值设置checkbox为选中值：
   $(“input:checkbox[value=‘1’]”).attr(‘checked’,‘true’);

8. 删除Value=1的checkbox：
   $(“input:checkbox[value=‘1’]”).remove();

9. 删除第几个checkbox：
   $(“input:checkbox”).eq(索引值).remove();索引值=0,1,2…
   如删除第3个checkbox:
   $(“input:checkbox”).eq(2).remove();

10.遍历checkbox：
$(‘input:checkbox’).each(function (index, domEle) {
//写入代码
});

11.全部选中
$(‘input:checkbox’).each(function() {
$(this).attr(‘checked’, true);
});

12.全部取消选择：
$(‘input:checkbox’).each(function () {
$(this).attr(‘checked’,false);
});

设置多个属性/值对
为被选元素设置一个以上的属性和值。
$(selector).attr({attribute:value, attribute:value …})
prop 版本高。 有时候低版本的attr 会出错 两者作用类似

全选 全不选 反选

$(function() {
$("#selectAll").click(function(){
$("#checkBoxList :checkbox").attr(“checked”, true);
});
$("#unSelect").click(function(){
$("#checkBoxList :checkbox").attr(“checked”, false);
});
$("#reverseSelect").click(function(){
$("#checkBoxList :checkbox").each(function(){
$(this).attr("checked",!$(this).attr(“checked”));
});
});
});
全选反选 组合
this
用AJAX提交表单时，按钮不能使用submit !!!
匹配所有索引值为奇数的元素，从 0 开始计数
$(“tr:odd”)
匹配所有索引值为偶数的元素，从 0 开始计数
$(“tr:even”)
eq获取第N个元素 从0开始
一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
$(“p”).eq(n)
一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
$(“p”).eq(-2)
：not(selector)
去除所有与给定选择器匹配的元素
查找所有未选中的 input 元素
HTML 代码:


jQuery 代码:
$(“input:not(:checked)”)
结果:
[ ]

//1.选择 body 内的所有 div 元素
$(“div”)
//2.在 body 内, 选择div子元素
$(“div”).children()
//3.选择 id 为 one 的下一个 div 元素
$("#one + div")
//4.选择 id 为 two 的元素后面所有的兄弟元素
$("#two").nextAll(“span”)
//通过遍历 弹框选择项的值
$(“input”).eq(4).click(function(){
var str="";
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ str+=(this).val()+"–";
})
str=str.substr(1);
alert(str)
})
删除
①删除匹配的元素集合中所有的子节点。
示例
描述:
把所有段落的子元素（包括文本节点）删除
HTML 代码:

Hello, Person and person

jQuery 代码: $("p").empty(); 结果:

②DOM中删除所有匹配的元素。 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。 -从DOM中把带有hello类的段落删除 HTML 代码:

Hello

how are

you?

jQuery 代码: $("p").remove(".hello"); 结果: how are

you?

表单提交清空表单内容
document.getElementById(“form1”).reset();
或者
$("#form1")[0].reset();

序列化表单
$("#form").serialize();
带图片的表单新增
KaTeX parse error: Expected '}', got 'EOF' at end of input: …m=new FormData(("#form1")[0]);
$.ajax({
async:true,
url:"<%=path%>/book/addBook.do",
data:form,
type:“post”,
dataType:“text”,//返回值类型
contentType:false,//不用设置编码类型 类似 multipart/form-data
processData:false,//不用序列化表单
success:function(start){
alert(start);
if(confirm(“确定–>去查询/取消–>继续新增”)){
location.href="<%=path%>/bookList.jsp";
}else{
document.getElementById(“form1”).reset();
}
},
error:function(){
alert(“出错了”);
}
});
});