jQuery的基础应用

jQuery的引用

<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script> 
.....
</script> 

$表示jQuery的调用
DOM元素的获取方式：

基础选择器
1.Id选择器 $("#id属性值") 选择id为指定值的元素 （如果有多个同名Id，只会获取第一个）
2.类选择器 $(".class属性值") 选择所有class属性为指定值的元素
3.元素选择器 $(“元素名/标签名”) 选择指定标签的元素
4.选择所有选择器 $("*") 选择所有标签的元素
5.组合选择器 $(“选择器1,选择器2…”) 选择器指定选择器选中的元素

可以通过各种选择器来获取

1. var mydiv = $("#mydiv");
2. var cls = $(".cls");
3. var divs = $(“div”);
4. var all = $("*");
5. var group = $("#mydiv,span,.cls");

选择器
名称

		后代选择器  	**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")				选择所有的偶数下标的元素	
			
		属性选择器
			$("[属性名]")		$("[name]")	选择所有设置过name属性值的元素
			$("[属性名=属性值]")	$("[id='myId']")	选择所有属性名等于指定属性值的元素

获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。
attr(‘checked’) attr(‘name’)
prop(属性名称) 获取具有 true 和 false 两个属性的属性值
prop(‘checked’)
removeAttr();

		注：
			1、固有属性：attr()和prop()都可使用
			2、自定义属性：attr()可用，prop()不可用
			3、返回值是boolean的属性：
				attr():如果设置过，则返回具体值，若未设置过，返回undefined
				prop():返回true和false
			
			返回值是boolean类型的属性:
				checked（单选和复选选中状态）、selected（下拉框选中状态）、disabled（禁用）

总结：返回值是boolean类型的属性，使用prop();其他的属性使用attr()

获取内容/值的两种方式 说明
html() 获取元素的 html 内容
html(“html 内容”) 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text(“text 内容”) 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值

元素添加插入方法 说明
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)

		注：如果被追加对象是已存在的元素，则该元素会被直接剪切到指定位置

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

var divs=$("#div");
divs.each(function(index,element){
			console.log(index);
			console.log(element);
		});

onload事件与ready事件的区别：
当Dom结构加载完毕后，ready事件就执行；
当Dom结构加载完毕，并且引入的外部文件加载完毕，onload事件才会执行

ready事件可以同时写多个，按顺序执行
语法：$(document).ready(function(){});

缩写版：$(function(){});

window.onload = function() {
				console.log("onload...");
				var div = $("div");
				console.log(div);
			}
			
			// jquery的ready加载事件
			$(document).ready(function(){
				console.log("ready...");
				var div = $("div");
				console.log(div);
			});
			
			$(function(){
				console.log("ready简写...");
				var div = $("div");
				console.log(div);
			});