jQuery

最新推荐文章于 2023-07-07 14:28:52 发布



最新推荐文章于 2023-07-07 14:28:52 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/qq_43514335/article/details/91348742

jQuery 专栏收录该内容

1 篇文章

订阅专栏

jQuery

- 什么是jQuery

什么是jQuery

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”

jQuery优点

总是面向集合 , 多行操作集于一行

jquery的程序入口

$(function(){
		alert("hello");
	})

$(document).ready(function(){
		alert("hello");
	})

$ (fn),$ (document).ready(fn)是等价的,那个代码在前面那个就先执行
jsp的dom树结构加载完毕就调用方法

而window.onload最后执行.jsp的dom树结构加载完毕,css,js第静态资源加载完毕后执行

三种工厂方法

一、选择器

标签选择器
$(“标签名”)

id选择器
$("#id")

class选择器
$("#class")

包含选择器 E1 E2
$(“span p”) 找到span里面的p

组合选择器 E1,E2,E3
$(“span”,“a”,“div”).click()同时找到这几个标签并给他们添加点击事件

二、通过html创建jQuery对象

<script type="text/javascript">
	$(function(){
		$(":input[name='name1']").click(function(){
			//再id=sel1的jquery实例上追加
			$("#sel1").append("<option value='1'>湖南省</option>")
		})
		$(":input[name='name2']").click(function(){
			//将"<option value='1'>长沙</option>"html  jQuery实例追加带id=sel2中
			$("<option value='1'>长沙</option>").appendTo("#sel2 ")
		})
</script>
<body>
	<select id="sel1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="sel2">
		<option value="-1">---请选择---</option>
	</select>
	<input type="button" name="name1" value="add1" />
	<input type="button" name="name2" value="add2" />
</body>

三、 jQuery(element)

element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

//jquery对象转js对象
		var $qu = $("#aa");
		var qu = $qu.get(0);//第一种
		var qu = $qu[0];//第二种
		alert(qu.value);
		
var h2 = document.getElementById("h2");
alert(h2.value);
//js对象转jquery对象
var h22 = $(h2);
alert(h22.val());

this指针的作用

	$(":input").click(function(){
			//指的是事件源
			alert(this.value);
			$("a").each(function(index,item){
				//this指的是当前元素
				alert(index+","+$(this).html()+","+$(item).html());
			})
		})

ajax的转换＆ json的体现形式

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

	Map<String,String> stu = new hashMap<>();
	stu.add("01","gd");
	stu.add("02","zg");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj));

也可以将json对象转为java对象,在用$.ajax的时候可以转为java对象

var stu = $.pareJSON(str);

<script type="text/javascript">
  	//相当于window.onload
  	$(function(){
  		//添加失去焦点事件
  		$("#iname").blur(function(){
  			var name = $("#iname").val();
  			//①$.ajax()
  			/*$.ajax({
  				url:"vname.do",//请求地址servlet
  				type:"post",//请求方式 默认为get
  				data:{iname:name},//参数key/value
  				dataType:"text",//预期返回的响应类型
  				success:function(str){//成功的回调函数
  					//alert(str);//弹出服务器给的响应
  					$("#sp").html(str);
  				},
  				error:function(){//失败的回调函数
  					alert("出错了");
  				}
  			})*/
  			
  			//②$.post()
  			$.post("vname.do",{iname:name},function(str){
  				$("#sp").html(str);
  			})
  		})
  	})
  
			//json对象的字符串体现形式
		var a = {
				sid:"s001",
				sname:"zs"
		}
		console.log(a);
		//json数组的字符串体现形式
		var b =[1,2,3,4]
		console.log(b);
		//json混合模式的字符串体现形式
		var c = {id:3,hobby:["a","c"]};
		console.log(c);
		

  </script>

extend的扩充

利用$.extend来进行值的扩充

<script type="text/javascript">
	$(function(){
		//$.extend是用来扩充jquery类属性或者方法所用的
		 var json={
				sid:'s001',
				sname:'list',
				hobby:['a','b','c','d']
		}
		 var json1={
					sid:'s002',
					sname:'list1',
					hobby:['a1','b1','c1','d1']
			}
		
		var json2={};
		//用后面的对象扩充定一个对象
		$.extend(json2,json2)
	//	讲解扩充值覆盖的问题，之前以及扩充的属性值会被后面的对象所覆盖，如果后面有新的属性，还会继续扩充
		$.extend(json3,json,json1)
	})

利用$.extend来写方法

		$.extend({
			hello:function(){
				alert('我来了');
			}
		})
		$.hello(); //结果还是弹出了‘我来了’

jQuery

jQuery

什么是jQuery

jQuery优点

jquery的程序入口

三种工厂方法

一、选择器

二、通过html创建jQuery对象

三、 jQuery(element)

this指针的作用

ajax的转换 ＆ json的体现形式

extend的扩充

ajax的转换＆ json的体现形式