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格式
			});