jQuery笔记

jQuery是一个JS库，使用jQuery的话，比JavaScript更简单

因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

---

1.1 jQuery基础

1.1.1 jQuery的写法

//第一种写法
	$(dounment).ready(function(){
        //dounment：文件
        //ready:准备好
        //function: 函数
    });

//第二种写法
	$(function(){
        	//function : 封装函数
    });

1.1.2 DOM对象与 jQuery对象的区分

document.getElementByld("#myld").innerHTML;
	//获取id为myld的节点
	//这是DOM对象

$("#muyld").html();
	//这是jQuery对象

jQuery对象不能用DOM对象的方法;

DOM对象不能用jQury里的方法;

1.1.3 DOM对象与jQuery对象的转换

​ jQuery对象转DOM对象

	//jQuery提供了[index]与get(index)两种方法转换为DOM对象
一:
	var $div = $("div");
	var div = $div[0];
	alert(div.innerHTML);
二：
	var $div = $("div");
	var div = $div.get(0);
	alert(div.innerHTML);

​ DOM对象转jQuery对象

	var div  = document.getElementById("id");
	var $div = $(div);

1.1.4 基本选择器

 id选择器:
 	语法:$("#id")
 class选择器:
	语法:$(".class");
 标签选择器:
	语法:$("div");
 获取多个元素:
	语法:$("xx,xx,xx")

1.1.5 过滤

2.1 jQuery的DOM操作

2.1.1 创建节点

$("<h3 id="text"></h3>");

2.2.1 插入节点

warp(); -用指定结构的元素包裹元素
warpAll(); - 包裹多个元素
warpInner(); - 用指定结构包裹元素的内容

// 创建包含在某个 xx 李的节点
$("<h3 id='hello' class='xxx'>hello</h3>")
  .unwrap("<h3>")
  .wrap("<h5>")
  .wrap("<header></header>");

2.3.1 附加节点

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
appendTo() - 将所有匹配的元素追加到指定的元素中
prependTo() - 将所有匹配的元素前置到指定的元素中
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$(".xx").append();

2.4.1 删除节点/内容

remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
	
	$("#div").remove();

2.5.1 操作DOM的方法

text() - 设置文本内容
html() - 设置或返回所选元素的内容（包含HTML标签）
val() - 设置或返回值，(如文本框中的值)
attr() - 获取属性值(  如$("#a").attr("href") 获取地址值  )

2.6.1 操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass - 删除一个或多个类
toggleClass() - 对元素进行添加与删除的切换操作

//设置CSS属性
	例:$("p").css("background","blue");	//背景颜色变为蓝色 
 //设置多个CSS属性
	例:
		$("P").CSS(
        	{
                "background-color":"blue",
                "font-size":"100%",
            }
        )

3.1 事件

API:

• 绑定: $(el).on('click', function(event) { $(this).css("color", "red") });
• 简化: $(el).click(callback);
• 委托: $(div).on('click', '.del', callback);
• 取消: $(div).off(); $(div).off('click');

事件类型:

• 鼠标: click / dblclick / mouseenter / mouseover / mouseout / mouseleave /hover
• 键盘: keydown/keyup/keypress
• 表单: focus/blur/change/select/sumbit
• DOM: ready/load/unload/resize/scroll

委托事件

$("section").on('click','.c2',function(ev){
    
    alert("xxx");
})

悬停效果:

$(".c2").hover(
    function (ev) {
        console.log("222");
    },
    function(ev) {
        console.log("leave");
    }
);

4.1 动画

4.1.1 隐藏/显示

 隐藏:hide();
 显示:show();
	如:
		$("#hide").click(function(){
            $("p").hide();
        })

4.2.1 淡入/淡出

1.淡入：fadeln()
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);//毫秒

2.淡出：fadeOut()
	
3.切换:fadeToggle()
	可在淡入，淡出之间切换
4.渐变:fadeTo()
	允许渐变给为给定的不透明值(0-1之间)
	无默认参数，必须加上slow/fast/time
     例:
   $("#div1").fadeTo("slow",0.15);
   $("#div2").fadeTo("slow",0.4);
   $("#div3").fadeTo("slow",0.7);

注意事项：大小写不能改变。	

4.3.1 滑动

1.向下滑动 slideDown()
	$(".xx").sildeDown(); //slow/fast/毫秒
2.向上滑动:slideUp()
	
3.切换:slideToggle()
	可切换向上与向下滑动

4.4.1 停止

1.停止动画 stop()
	$(".xx").stop();

4.5.1 自定义动画

1.animate(),自定义css属性,
    例:
    	  $(".butt").on('click',function(ev){
                $(".div").animate({
                    left:'200px',
                    width:'220px',
                    height:'220px',
                    //可使用相对值,在当前数值的基础上加,
                    //写法为 width:'+=220px' -=
                    //也可使用show/hide/toggle等属性,width:'show'
                    opacity:'0.6',
                    fontSize:"50px"
                    
                })
            })
		注意：属性名必须使用Camel 标记法
        必须使用 paddingLeft 而不是 padding-left
2.

5.1 异步请求(Ajax)

​ AJAX:异步JavaScript和XML，创建交互式网页应用的开发技术

​ AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。