jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

★流☆沙★

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量99

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_37464140/article/details/103840008

版权

jQuery

js类库，对原生js常见方法和对象进行封装

html和jQuery的整合

通过script标签的src属性导入

获取jQuery对象

$("选择器")
jQuery("选择器")

dom对象和jQuery之间的转换

* dom>>>>jQuery
	* $(dom对象)
* jQuery>>>>dom
	* 方式1： jQuery对象[index]
	* 方式2：jQuery对象.get(index)

<script>
	var userobj= document.getElementById("username");
	alert(userobj);
	alert($(userobj));
	alert($(userobj).val());

	var $username=$("#username");
	alert($username);//object
	alert($username[0]);
	alert($username[0].value);
</script>

页面载入

$(document).ready(function(){............})
$(function(){............})

<script type="text/javascript">
// onload只会加载一次，后边的会覆盖前边的
	onload=function(){
		alert(12);
	}
	onload=function(){
		alert(34);
	}
// 可加载多次	
	$(function(){
		alert(12);
	})
	$(function(){
		alert(34);
	})
</script>

派发事件

事件和js中的事件一样：把on去掉即可

$("选择器").xxx(function(){..............})
等价于原生js中的
dom对象.onxxx=function(){..............}

需掌握事件

blur()		触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()		触发、或将函数绑定到指定元素的 click 事件
focus()		触发、或将函数绑定到指定元素的 focus 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件

<script type="text/javascript">
//别忘记先加载
	$(function(){
		$("#bId").click(function(){
			alert("我被点击啦");
		});
	})
</script>

选择器

基本选择器

$("id")
$(".class")
$("元素名称")
$("*")
$("","")

层次选择器

$("[属性]=“值”)
a b : 后代选择器
a>b :直接孩子
a+b:大兄弟
a~b:所有弟弟

基本过滤选择器

:first
:last
:odd 		索引奇数
:even 		索引偶数
:eg(index) 	指定索引
:gt(index) 	>
:lt(index)	<

<script type="text/javascript">
	$(function(){
		//选择body中所有的div
		$("#btn1").click(function(){
			$("body div").css("background-color","#FFFF00");
		})
		//选择body中下一级的div
		$("#btn2").click(function(){
			$("body>div").css("background-color","#FFFF00");
		})
		//$("#one+")选择 id为one 的下一个同级元素
		//$("#one+div")选择 id为one 的下一个同级div元素
		$("#btn3").click(function(){
			$("#one+div").css("background-color","#FFFF00");
		})
		//$("#two+")选择 id为two 的后续同级元素
		//$("#two++div")选择 id为two 的后续同级div元素
		$("#btn4").click(function(){
			$("#two~").css("background-color","#FFFF00");
		})
	})
</script>

<script type="text/javascript">
	$(function(){
	$("#btn1").click(function(){
		$("div:first").css("background-color","#0f0");
	})
	$("#btn2").click(function(){
		$("div:last").css("background-color","#0f0");
		})
	$("#btn3").click(function(){
			$("div:even").css("background-color","#0f0");
		})
	$("#btn4").click(function(){
			$("div:odd").css("background-color","#0f0");
		})
	$("#btn5").click(function(){
	 			$("div:eq(3)").css("background-color","#0f0");
	 		})
	$("#btn6").click(function(){
	 			$("div:gt(3)").css("background-color","#0f0");
	 		})
 </script>

内容过滤选择器

:has('选择器')

 <script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
 			$("div:has('.mini')").css("background-color","#0f0");
 		})
 	});
 </script>

可见过滤：

:hidden
:visible

<script type="text/javascript">
 	$(function(){
 		$("#b1").click(function(){
 			$("div:visible").css("background-color","red");			
 		});
 		$("#b2").click(function(){
 			$("div:hidden").show(); 			
 		});
 	});
 </script>

属性选择器

[属性名]
[属性名=“值”]

 <script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
 			$("div[title]").css("background-color","#ff0");
 		})
 		$("#btn2").click(function(){
 			$("div[title='test']").css("background-color","#ff0");
 		})
 	});
</script>

表单过滤

: input

checked选中的（针对单选框和复选框）

selected选中的（针对下拉选）
enabled 可用的
disabled不可用的

 <script type="text/javascript">
 	$(function(){
 		$("#btn1").click(function(){
			//alert($("form :input").size());
 			alert($("form :input").length);
 		})
 	});
 </script>

属性和css操作

对属性的操作

jQuery1.6版本后建议都改prop操作

attr():设置或者获取元素的属性
- 方式1：获取
  - attr(“属性名称”)
- 方式2：设置
  - attr(“属性名称”,“值”)
- 方式3：设置多个属性 json
  - attr({
    “属性名称”:“值”,
    “属性名称”:“值”,
    })
removeAttr(“属性名称”),移除指定属性

操作class属性

addClass() 向匹配的元素添加指定的类名。
removeClass() 从所有匹配的元素中删除全部或者指定的类。

对css样式操作

css():设置或者获取元素的属性
- 方式1：获取
  - css(“属性名称”)
- 方式2：设置
  - css(“属性名称”,“值”)
- 方式3：设置多个属性 json
  - css({
    “属性名称”:“值”,
    “属性名称”:“值”,
    })
removeAtte(“属性名称”),移除指定属性
attr | prop
- prop(“属性”) :获取
- prop(“属性”,“值”) :设置一个
- prop({“属性”：“值”，“属性”,“值”}) :设置多个
removeAttr | removeProp(属性)

获取元素的尺寸

height()
width()

设置或获取value属性

* val()

设置或获取标签体的内容

* html()
* text()
* 二者设置值的区别
	* html() 可将字符串代码转为代码
	* text() 只能将括号内的内容原样设置在内容中
* 二者获取值的区别
	* html() 可获取源代码
	* text() 只能获取展示的内容

对文档操作

内部插入

appendTo
prependTo

外部插入

删除

empty()清空
remove()删除

效果

隐藏或展示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

hide() show() toggle()

滑入划出

slideDown()
slideUp()
slideToggle()

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

遍历

方式1：
jQuery对象.each(function(){............})
方式2：
$.each(function(){............})

$(selector).each(function(index,element))
function(index,element)	
参数必需。为每个匹配元素规定运行的函数。
	index - 选择器的 index 位置
	element - 当前的元素（也可使用 "this" 选择器）

 <script type="text/javascript">
 	$(function(){
 		$("#b1").click(function(){
 			$("input:hidden").each(function(){
 				alert($(this).val());
 			});
 		});
 		
 		 $("#b2").click(function(){
 			$(function(){
	 			$.each($("input:hidden"),function(){
	 				alert($(this).val());
	 			});
 			});
 		});
 	})	 
 </script>

<script type="text/javascript">
	 $(function(){
 		$("[name='pro']").change(function(){
 			var cit =$("[name='city']");
 			cit.html("<option >-请选择-</option>");
 			var pro =$(this).val();
 			var cities=$(arr[pro]);
 			cities.each(function(){
 				cit.append("<option>"+this+"</option>");
 			})
 		})
 	});
</script>