jquery的课堂笔记—Day51-2190716

1 jquery的认识

1.1 什么是jquery(了解)

(1)jquery他是继prototype之后的优秀的js框架

​ prototype：原型

​ spring ：它是一个轻量级DI（IOC） 和AOP的容器框架

​ DI：依赖注入

​ IOC：控制反转

​ AOP：面向切面的编程

​

(2)链式语法和多功能的接口

(3)兼容性强

(4)丰富的插件机制

(5)扩展了CSS的选择器

(6)写的更少完成更多write less do more

1.2 使用jquery(掌握)

使用步骤： (1) 下载jquery文件

​ (2)在页面引入jquery文件

​ (3)测试 $("#id") --》就是jquery语法

１.3 页面加载事件(掌握)

		<script type="text/javascript">
			
			//页面加载完之后 才执行内容 -- 最后执行，jquery写法先执行，都是在页面加载之后才执行
			window.onload = function(){
				alert(3);
				console.log(document.getElementById("myDiv"));
			}
	
			//完整写法
			$(document).ready(function(){
				alert(2);
				console.log($("#myDiv"));
			});
			
			//jquey写法 -- 也是页面加载完之后，才获取的内容 --推荐写法
			$(function(){
				alert(1);
				console.log($("#myDiv"));
			});
	
		</script>

1.4 $ 和 jQuery等效(掌握)

console.log("----------------------------")
console.log($("#myDiv"));
console.log(jQuery("#myDiv"));
//为什么提供两种写法 
//因为有时候可能 $ 会被其它的什么东西占用
console.log(window.$ === window.jQuery);

1.5 dom对象和jQuery对象相互转换(掌握)

为什么需要把dom对象转换成jQuery对象？

​ 转换成jQuery对象之后，才能调用jQuery里面的方法

​ 方式：

​ $(dom对象)

为什么jQuery对象转换成Dom对象？

​ 有时候想调用原生的属性或者方法 就需要把jQuery对象转换成Dom对象

​ jquery对象[0] --》取到dom元素

１.6 jquery的选择器

1.6.1 什么是选择器

选择器：通过它可以找到页面上面对应标签

1.6.2 常用选择器(掌握)

id选择器 – 特别多

​ $("#id")

class选择器

​ $(".className")

标签选择

​ $(tagName)

1.6.3 其他选择器(用一下 以后查阅文档)

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

$(“tagName1,tagName2”) 多元素选择器

$(‘tagName1 tagName2’) 祖先后代选器

$(“parent > child”) 父亲儿子

$("tag1 ~ tag2 ")

$(“tag1 + tag2”) 相邻选择器

$(“input[name=hobbies]”)属性选择器

1.6.4 jquery的练习题（掌握）

用到的方法：

​ append appendTo prepend prependTo 追加

val() 取值 val(values)赋值

prop(属性名,属性值)；给元素设属性值；

hide() show()

each(function(index,dom){})

empty()

clone() clone(true)

closest()

parent()

remove()移除

html() 等效innerHTML

css() 设置样式

:checked

:selected

:even

:odd

1.6.5 jquery事件注册(掌握)

jqueryObj.click(function{})

jqueryObj.on(‘click’,function())

jqeuryObj.off(‘click’);

jqueryObj.bind(‘click’,function())

jqeuryObj.unbind(‘click’)

1.6.6 二级联动（掌握）

json转换

发送ajax请求

$.get/post(url,params,function(result){},type)

比如：

$.get("/getData",{“key1”,“value2”,“key2”:“value2”},function(result){},“json”)