blog

# jQuery

# 什么是jQuery

  • 是一个js代码的框架
  • 可以让程序员 写的更少 但做的更多
  • 此框架本身就是使用js写的

# jQuery优势

  1. 简化js代码
  2. 可以像css一样获取元素
  3. 可以直接修改页面样式(css)
  4. 解决兼容性问题

# jQuery的引入

  • 因为jQuery就是js代码 所以引入方式和普通js文件一样

# $介绍

  • $是jQuery的简写 $("#div")=jQuery("#div")

# jQuery对象和js对象的转换

  • js的对象只能调用js自己的函数，如果js对象需要调用jQuery里面的函数，需要把js对象转成jQuery对象
  • 把js对象转成jQuery对象
    //通过js形式得到js对象
	var myinput = document.getElementById("myinp");
	//把js对象转成jq对象
	var $jq = $(myinput);
	alert($jq.val());
  • 把jQuery对象转成js对象
    //得到jq对象
	var $jq = $("#myinp");
	alert($jq.val());
	//把jq对象转成js对象
	//第一种
	var js1 = $jq[0];
	//第二种
	var js2 = $jq.get(0);
	alert(js1.value+"="+js2.value);

# jQuery选择器

# 基本选择器

  1. 标签名选择器 $("div") 匹配文档中所有的div
  2. id选择器 $("#id")
  3. 类选择器 $(".类名")
  4. 分组选择器 $("div,#id,.class")
  5. 所有元素 $("*")

# 层级选择器

  1. $("div span") 匹配div下所有的span元素
  2. $("div>span") 匹配div下所有子为span的元素
  3. $("div+span") 匹配div后面紧邻的span兄弟元素
  4. $("div~span") 匹配div后面所有的span兄弟元素

# 层级函数

  1. 获取元素的所有兄弟元素 $("#two").siblings("div")
  2. 获取元素的哥哥元素 $("#two").prev("div")
  3. 获取元素的哥哥们元素 $("#two").prevAll("div")
  4. 获取元素的弟弟元素 $("#two").next("div")
  5. 获取元素的弟弟们元素 $("#two").nextAll("div")
  6. 元素.parent() 得到上级父元素
  7. 元素.children() 得到所有的子元素
  8. 元素.children().eq(0) 获取第n个子元素
  9. $("div").eq(0) 得到查询结果中的第几个
  10. 元素.children("#aaa") 查询m元素中id为aa的子元素
    $("#b5").click(function(){
		$("#two").siblings("div").css("background-color","#9acd32");
	})

# 过滤选择器

  1. $("div:first") 匹配所有div中的第一个元素
  2. $("div:last") 匹配所有div中的最后一个元素
  3. $("div:even") 匹配所有div中偶数div 从0开始
  4. $("div.odd") 匹配所有div中奇数div 从0开始
  5. $("div.eq(n)") 匹配所有div中下标为n的元素 从0开始
  6. $("div.lt(n)") 匹配所有div中下标小于n的元素 从0开始
  7. $("div.gt(n)") 匹配所有div中下标大于n的元素 从0开始
  8. $("div:not(.one)") 匹配所有div中 class不为one的元素

# 内容选择器

  1. $("div:has(p)") 匹配所有包含p标签的div
  2. $("div:empty") 匹配所有空的div
  3. $("div:parent") 匹配所有非空的div
  4. $("div:contains('文本内容')") 匹配包含'文本内容'的div

# 可见选择器

  1. $("div:hidden") 匹配所有隐藏的div元素
  2. $("div:visible") 匹配所有可见的div元素

# jq中显示相关的函数

  1. 让隐藏的元素显示 $("div:hidden").show();
  2. 让显示的元素隐藏 $("div:visible").hide();
  3. 切换元素的显示状态 $("div").toggle();

# 属性选择器

  1. $("div[id]") 匹配有id属性的div元素
  2. $("div[id='d1']") 匹配id属性等于d1的div
  3. $("div[id!='d1']") 匹配id属性不等于d1的div

# 子元素选择器

  1. $("div:nth-child(n)") n从1开始，匹配div中第n个子元素
  2. $("div:first-child") 匹配div中第1个子元素
  3. $("div:last-child") 匹配div中最后一个子元素

# 表单选择器

  1. $(":input") 匹配所有的input中 文本框，密码框，单选，复选框，下拉选，文本域（textarea），button
  2. $(":password") 匹配所有密码框
  3. $(":radio") 匹配所有单选框
  4. $(":checkbox") 匹配所有复选框
  5. $(":checked") 匹配所有被选中的 单选/复选/下拉选option
  6. $("input:checked") 匹配所有被选中的单选和复选
  7. $(":selected") 匹配所有被选中的下拉选option
    //遍历选择到的多个元素
	$(":checked").each(function(){
		//this 代表当前遍历的内容(js元素)
		//把遍历的js对象转成jq对象
		alert($(this).val());
	});

# 文档操作

  1. 创建元素 var $d = $("<div>abc</div>");
  2. 添加元素
    $("#big").append($d);//最后面
    $("#big").prepend($d);//最前面
  1. 插入元素
    兄弟元素.after($d);//插入到兄弟元素的后面
    兄弟元素.before($d);//插入到兄弟元素的前面
  1. 删除元素
  • 通过自己删除 $("#id").remove();
  • 先得到所有的li 然后删除里面id为sh的 $("li").remove("#sh");
  1. 修改样式
    $("#id").css("width","40px") //设置宽度
    $("#id").css("width") //获取宽度
  1. 属性
    $("#id").attr("id","xx") //设置id属性
    $("#id").attr("id") //获取id
  1. 文本
    $("#id").text("xxx") //设置元素文本
    $("#id").text() //获取文本
  1. html
    $("#id").html("xxx") //设置元素html代码
    $("#id").html() //获取html代码

# 在事件中获取事件源的方式

  1. 如果元素动态绑定事件，this为事件源 $(this)
  2. 非动态绑定 event.target||event.srcElement
  3. 绑定事件时传递this ,事件中用变量接受，此变量就是事件源

# jq事件相关

# 常用事件

  1. click
  2. blur 失去焦点
  3. focus得到焦点
  4. change 值发生改变
  5. ready 页面加载完成 onload $(document).ready(function(){}); $(function(){});

# 在事件中获取事件源的方式

  1. 如果元素动态绑定事件，this为事件源
  2. 非动态绑定 event.target||event.srcElement
  3. 绑定事件时传递this ,事件中用变量接受，此变量就是事件源

# 事件模拟

    $(function(){
		//延时执行
		setTimeout(function(){
			//模拟按钮的点击事件
			$("input").trigger("click");
		},3000);
	})

# 事件的合并

  1. 切换显示和不显示 toggle();
  2. hover(fn1,fn2); 相当于onmouseover+onmouseout 鼠标移入执行fn1，移出执行fn2
    //给div添加hover事件
	$("div").hover(function(){
		console.log("进来了");
	},function(){
		console.log("出去了");
	});

# 动画

    function fn1(){//显示
		$("img").show(3000);
	}
	function fn2(){//隐藏
		//第一个参数为动画持续事件，第二个参数为回调函数(可以省略)
		$("img").hide(3000,function(){
			$("img").show(3000);
		});
	}
	function fn3(){//上滑
		$("img").eq(1).slideUp(2000);
	}
	function fn4(){//下滑
		$("img").eq(1).slideDown(2000);
	}
	function fn5(){//淡入
		$("img").eq(2).fadeIn(1000);
	}
	function fn6(){//淡出
		$("img").eq(2).fadeOut(1000);
	}
	function fn7(){//自定义
		$("img").animate({"left":"350px"},2000)
		.animate({"top":"250px"},2000)
		.animate({"left":"0px"},2000)
		.animate({"top":"0px"},2000)
		.animate({"width":"300px","height":"250px"},2000)
		.animate({"width":"200px","height":"150px"},2000);
	}
Last Updated: 11/20/2024, 2:55:49 PM