js日常分享==JQuery

今天分享一些JQuery的一些小的知识点.
1.jQuery的核心技术$ 符,代表的是jQuery对象的引用.
在java script中通过ID选择器获取DOM对象.

<div id="mydiv">Hello</div>
//js中通过ID选择器
var  mydivDom = document.getElementById("mydiv")


//通过jquery的ID选择器获取jquery包装集对象.
var mydivJquery = $("#mydiv");
或者 $ 换成jquery
var mydivJquery = jQuery("#mydiv");

2.Dom对象与jQuery的互相转换

1.将Dom转化为jQuery包装集对象:只需要在dom对象外面包装JQuery即可.   $(dom对象)
var  domTojQuery = $(mydivDom );

2.1将Jquery包装集对象转换为Dom对象：Jquery包装集取下标 	  jquery包装集对象[0]
var jqueryToDom = mydivJquery[0];
2.2 Jquery中的each()函数，会将遍历的jquery对象变成dom对象
mydivJquery.each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(this);
			console.log($(this));
		});
each(fucntion):
		 	语法：
		 	jquery对象.each(fucntion([当前下标,当前被遍历到的元素]){
		  	
		  		});
			this：谁调用函数，this指代谁

通过原生JS获取节点，如果节点不存在，返回null；
如果通过Jquery获取节点，如果节点不存在，会返回空包装集对象。所以判断Jqury对象是否存在需要使用length

基础选择器

基础选择器介绍以下五种

ID选择器 :      $("#id属性值")      选择ID为指定值元素(如果有多个同名ID,只会获取第一个
     
类选择器 :      $(".class属性值")   选择所有class属性为指定值的元素

元素选择器      $("元素名/标签名")   选择指定标签元素

选择所有选择器  $("*")              选择所有标签的元素

组合选择器      $("选择器1,选择器2...	") 指定选择选择的元素

		// Id选择器		$("#id属性值")
		var mydiv = $("#mydiv");
		
		// 类选择器		$(".class属性值")
		var cls = $(".cls1");`
		
		// 元素选择器		$("元素名/标签名")
		var divs = $("div");`
		
		// 选择所有选择器	$("*")
		var all = $("*");`
		
		// 组合选择器		$("选择器1,选择器2...")
		var group = $("#mydiv,span,.cls1");

层次选择器

后代选择器     				ncestor descendant     空格隔开
var houdai = $("#parent div");
子代选择器     			    parent>child			大于号
var zidai = $("#parent>div");
相邻选择器      				prev + next	 加号 (往下找,只找一个,且元素必须和选择器相邻)
var xl = $("#parent + p");
同辈选择器     				prev ~ sibling		波浪号(往下找,找到所有同辈的指定元素)
var tb = $("#parent ~ p");

其它选择器

表单选择器
 $(":radio")			选择所有单选框按钮
 $(":checkbox")			选择所有复选框按钮

过滤选择器
$(":checked")						选择所有选中状态的元素(单选框和复选框)
$(":checkbox:checked")              选择所有复选被选中的元素
$(":checkbox:checked:eq(index)")   匹配被选中的选择的指定下标的元素
$(":checkbox:checked").eq(index)
$(":checked:gt(index)")				选择下标大于指定值的元素
$(":odd")							选择所有的奇数下标的元素
$(":even")							选择所有的偶数下标

$(":input")                        选择所有的表单元素(文本框,密码框,下拉框,文本域等..)
$("input")                          选择所有input标签元素

属性选择器
$("[属性名]")			$("[name]")  选择所有设置过name属性值的元素
$("[属性名=属性值]")     $("id='myId") 选择所有属性名等于指定属性值的元素

操作元素的属性

attr(属性名称) 获取指定的属性值，  操作 checkbox 时选中返回	checked，
没有选中返回 undefined。   attr('checked')  attr('name')
prop(属性名称) 获取具有 true 和 false 两个属性的属性值 	
prop('checked')
/*=============取值===============*/
		// 固有属性：元素本身就有的属性
		var type = $(":checked").attr("type");
		var type2 = $(":checked").prop("type");
		
		// 返回值是boolean类型的属性
		var ck1 =  $(":checked").attr("checked");
		var ck2 =  $(":checked").prop("checked");
/*=============赋值===============*/
		// 固有属性：元素本身就有的属性
		$("#bb").attr("name","hobby");
		$("#bb").prop("name","hobby2");
		// 自定义属性
		$("#aa").attr("data-id","Hi");
		$("#aa").prop("data-id","Hi2");
		
		// 返回值是boolean类型的属性
		//$("#bb").attr("checked","checked");
		//$("#bb").attr("checked",true);

移除属性:   removeAttr();
===========移除属性============
		$("#aa").removeAttr("data-id");

操作元素的样式

attr("class")		   获取 class 属性的值，即样式名称

attr(“class”,”样式名”) 修改 class 属性的值，修改样式 注:会覆盖原本的class属性，重新赋值

addClass(“样式名”) 	   添加样式名称	 注：添加样式，原本的样式保留；
如果出现相同的样式名，则以样式中后定义的为准

css() 				添加具体的样式注：添加具体的样式名，相当于写在style属性中的样式
，样式会叠加，优先级最高

removeClass(class)     移除样式名称


// attr(“class”) 	获取 class 属性的值，即样式名称
		var conBlue = $("#conBlue").attr("class");

// attr(“class”,”样式名”) 修改 class 属性的值，修改样式
		$("#conRed").attr("class","red");
		$("#conRed").attr("class","larger");``

// addClass(“样式名”) 		添加样式名称
		$("#conRed").addClass("red");
		$("#conRed").addClass("pink");`

// css() 添加具体的样式 （定义在style属性中的样式）
		// 设置一个样式  css("样式名","样式值")
		$("#conBlue").css("color","black");
		$("#conBlue").css("background","green");

// 同时设置多个样式
		$("#conBlue").css({"border":"solid 1px red","height":"50px"});
		
// removeClass(class) 		移除样式名称
		$("#conBlue").removeClass("larger");

操作元素内容

html() 				获取元素的 html 内容
html("html 内容") 	设定元素的 html 内容
text() 				获取元素的文本内容，不包含 html
text("text 内容") 	设置元素的文本内容，不包含 html
val() 				获取元素 value 值
val(‘值’) 			设定元素的 value 值

删除元素

remove() 	删除所选元素或指定的子元素，包括整个标签和内容一起删。
$(".green").remove();

empty() 	清空所选元素的内容
$(".green").empty();

遍历元素

each()
			$(selector).each(function(index,element)) :遍历元素
			参数 function 为遍历时的回调函数，
			index 为遍历元素的序列号，从 0 开始。
			element 是当前的元素，此时是 dom 元素。

添加元素

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)
			
注：如果被追加对象是已存在的元素，则该元素会被直接剪切到指定位置

ready加载事件

onload事件与ready事件的区别：
当Dom结构加载完毕后，ready事件就执行；
当Dom结构加载完毕，并且引入的外部文件加载完毕，onload事件才会执行
			
ready事件可以同时写多个，按顺序执行
语法：$(document).ready(function(){});
缩写版：$(function(){});

事件

bind()绑定元素事件
	为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
	$(selector).bind( eventType [, eventData], handler(eventObject))
	eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可
	以包括如下：
		blur, focus, focusin, focusout, load, resize, scroll, unload, click, 
	dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, 
	mouseleave,change, select, submit, keydown, keypress, keyup, error 。
	[, eventData]：传递的参数，格式：{名:值,名 2:值 2}
	handler(eventObject)：该事件触发执行的函数
				
	1.确定为哪些元素绑定事件
			获取元素
	2.绑定什么事件（事件类型）
			第一个参数：事件的类型
	3.相应事件触发的，执行的操作
			第二个参数：函数