Dom对象 与 Jquery包装集对象
Dom对象的获取方法
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
Jquery包装集对象
获取方法
var jQueryObject = $("#testDiv");
Dom对象 转 Jquery对象
代码示例
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);
Jquery对象 转 Dom对象
代码示例
// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom
选择器
基本选择器
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选择器 element $("div")选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素
属性选择器 [属性 = "属性值"] $("[abc = 'cbd']");选择页面中属性abc值为cbd的元素
//id选择器
var div1 = $("#mydiv1");
console.log(div1);
//元素名称选择器
var divs = $("div");
console.log(divs);
//类选择器
var bls = $(".blue");
console.log(bls);
//选择所有元素
var all = $("*");
console.log(all);
//组合选择器
var zh = $("#mydiv1,div,.blue");
console.log(zh);
//属性选择器
var pre = $("[abc = 'cbd']");
console.log(pre);
层次选择器
后代选择器 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元素
// 后代选择器
var hd = $("#parent img");
console.log(hd);
//子代选择器
var zd = $("#parent > div");
console.log(zd);
//相邻选择器
var xl = $("#child + div");
console.log(xl);
//同辈选择器
var tb = $(".gray ~ img");
console.log(tb);
表单选择器
表单选择器:input查找所有的input元素：$(":input")；<br />注意：会匹配所有的input、textarea、select和button元素。
文本框选择器:text查找所有文本框：$(":text")
密码框选择器:password查找所有密码框：$(":password")
单选按钮选择器:radio查找所有单选按钮：$(":radio")
复选框选择器:checkbox查找所有复选框：$(":checkbox")
提交按钮选择器:submit查找所有提交按钮：$(":submit")
图像域选择器:image查找所有图像域：$(":image")
重置按钮选择器:reset查找所有重置按钮：$(":reset")
按钮选择器:button查找所有按钮：$(":button")
文件域选择器:file查找所有文件域：$(":file")
//获取表单选择器
var bd = $(":input");
console.log(bd);
//单选按钮选择器
var radios = $(":radio");
console.log(radios);
//多选按钮选择器
var checkboxs = $(":checkbox");
console.log(checkboxs);
function checkForm(){
// return false;
}
//文本框选择器:text查找所有文本框：$(":text")
var text=$(":text");
console.log(text);
//密码框选择器:password查找所有密码框：$(":password")
var pwd=$(":password");
console.log(pwd);
//提交按钮选择器:submit查找所有提交按钮：$(":submit")
var sub=$(":submit");
console.log(sub);
//图像域选择器:image查找所有图像域：$(":image")
var img=$(":image");
console.log(img);
//重置按钮选择器:reset查找所有重置按钮：$(":reset")
var res=$(":reset");
console.log(res);
//按钮选择器:button查找所有按钮：$(":button")
var but=$(":button");
console.log(but);
//文件域选择器:file查找所有文件域：$(":file")
var file=$(":file");
console.log(file);
Jquery Dom操作
操作属性
属性的分类
元素固有属性
元素自带属性
自定义属性
元素中自己定义的属性和值
属性值为boolean类型的属性
checked selected disabled......
获取属性
attr("属性名")
可以操作固有属性和自定义属性
操作boolean类型属性，如果属性存在获取具体的值，如果不存在，返回undefined
prop("属性名")
可以操作固有属性，不能操作自定义属性
操作boolean类型属性，如果属性存在返回true，如果不存在，返回false
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名");
//获取表单元素
var in1 = $("#in1");
var in2 = $("#in2");
//获取固有属性
console.log(in1.attr("value"),in1.prop("value"));
console.log(in2.attr("value"),in2.prop("value"));
//操作自定义的属性
console.log(in1.attr("data"));
console.log(in2.attr("data"));
console.log(in2.prop("data"));
console.log(in2.prop("data"));
//操作boolean的属性
console.log(in1.attr("checked"));
console.log(in1.prop("checked"));
console.log(in2.attr("checked"));
console.log(in2.prop("checked"));
//设置自定义属性
in2.attr("abc","123");
//设置boolean类型
// in2.attr("checked","checked");
in2.prop("checked",true);
//移除属性
in2.removeAttr("data");
操作样式（Style）
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式 覆盖原有的样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式 在元素中style
removeClass(class) 移除样式名称
//获取class属性的值
var cb = $("#conBlue");
console.log(cb.attr("class"));
//修改class属性的值
cb.attr("class","green");
cb.addClass("larger");
//添加样式名称
var cr = $("#conRed");
cr.addClass("green");
cr.addClass("blue");
//添加具体的样式
cr.css("color","red");
cr.css({
"font-family":"华文新魏",
"font-weight":900
});
//移除样式名称
var rm = $("#remove");
rm.removeClass("larger");
rm.removeClass("blue");
操作内容
操作元素内容
非表单元素
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
表单元素
val() 获取元素value值
val(‘值’) 设定元素的value值
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
text() 获取元素的文本内容，不包含html
text("text 内容") 设置元素的文本内容，不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值
// 获取元素的内容
console.log($("h3").html());
console.log($("h3").text());
//设置元素的内容
$("#html").html("<h2>PDD</h2>");;
$("#text").text("<h2>卢本伟</h2>");;
//获取元素的value值
var val = $("[name = 'uname']").val();
console.log(val);
$("[name = 'uname']").val('大司马');
元素
创建，添加，删除元素
创建元素
$(内容) $("<p>段落标签</p>")
添加元素
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)
//删除元素
remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()清空所选元素的内容
//创建元素
var str = "<p>段落标签</p>";
console.log($(str));
//获取追加的元素
var div = $(".green");
//创建新的元素
var str = "<span>周杰伦</span>";
//添加新元素 前追加
div.prepend(str);
//prependTo()方法前追加内容
var str2 = "<span>林俊杰</span>";
$(str2).prependTo(div);
//append()方法后追加内容 后追加
div.append("<span>梁朝伟</span>");
//appendTo()方法后追加内容
$("<span>黄渤</span>").appendTo(div);
//before()
var ns = $(".red");
ns.before("<span style='color:red'>PDD</span>");
//after()
ns.after("<span style='color:red'>卢本伟</span>");
//删除元素 remove
// $(".blue").remove();
$(".blue").empty();
元素的遍历
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
var spans = $("span");
spans.each(function(index,element){
console.log(element);
console.log(index);
});
Ajax
ajax
Ajax
异步无刷新技术
$.ajax({
type:"请求的方式 GET POST",
url:"请求发送的地址",
data:{
//需要传输的数据
uname:'admin',
password:'1234'
},
dataType:'json/text'
success:function(data){
}
});
代码范例
$.ajax({
type:'GET',
url:'js/data.json',
data:{
uname:'admin',
upassword:'123'
},
dataType:'json',
success:function(data){
console.log(data);
}
});
get
$.get();
发送一个ajax GET请求
$.get('请求路径',{请求参数},回调函数);
代码范例
$.get('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});
post
$.post();
发送一个ajax post请求
$.get('请求路径',{请求参数},回调函数);
代码范例
需要有服务器
$.post('js/data.json',{name:"tom",age:100},function(data){
console.log(data);
});
JSON
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
代码范例
$.getJSON('js/data.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
4640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
