Day041 jQuery

1.1 jQuery 概述

1、 为什么使用 jQuery(遇到的问题)

• 选择器功能弱
• DOM操作繁琐之极
• 浏览器兼容性不好
• 动画效果弱

2、 什么是 jQuery(概念) jQuery （javaScriptQuery） JavaScript 代码库 官方网站： http://jquery.com/

3、 目前 jQuery 有三个大版本：

• 1.x： 兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本： 1.12.4 (2016年5月20日)
  
• 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。 如果不考虑兼容低版本的浏览器可以使用2.x，最终版本： 2.2.4 (2016年5月20日)
  
• 3.x： 不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的， 很多老的 jQuery 插件不支持这个版本。 目前该版本是官方主要更新维护的版本。 最新版本：3.2.1（2017 年 3 月 20 日）
  

1.2 jQuery 中$的含义

作用 1： $(function) 1.相当于 window.οnlοad=function(){} 2.功能比window.onload更强大 1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突 2) window onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$的执行时间要早 3.完整形式是$(document).ready(…….);

作用 2： $(selector) 选择器 jQuery具有强大的选择器功能,其他作用后续用到再总结

1.3 选择器学习 A

对象之间的转换 DOM对象：直接使用JavaScript获取的节点对象

• className innerHTML value

jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法

• addClass() html() val()

DOM对象和jQuery对象分别拥有一套独立的方法， 不能混用

DOM对象转换成jQuery对象

• $(DOM对象)

jQuery对象转换成DOM对象

• jQuery对象[index]
• jQuery对象.get(index)

基本选择器

• 标签选择器 $(“a”)
• ID选择器 $(“#id”) $(“p#id”)
• 类选择器 $(“.class”) $(“h2.class”)通配选择器 $("*")

1.4 选择器学习 B

• 并集选择器$("elem1,elem2,elem3")
• 后代选择器$(ul li)
• 父子选择器 $(ul>li)
• 后面第一个兄弟元素 prev + next
• 后面所有的兄弟元素 prev ~ next

1.5 选择器学习 C

//只是第一行变颜色

$("ul li:first").css("background-color","red");

$("ul li").first().css("background-color","red");

//最后一行变颜色

$("ul li:last").css("background-color","green");

$("ul li").last().css("background-color","green");

//获得索引是奇数对象 索引从0开始

$("ul li:odd").css("background-color","green");

//获得索引是偶数对象 索引从0开始

$("ul li:even").css("background-color","green");

//获得索引下标位3的对象

$("ul li:eq(3)").css("background-color","green");

//获得大于指定索引下标的对象

$("ul li:gt(3)").css("background-color","green");

//获得小于指定索引下标的对象

$("ul li:lt(3)").css("background-color","green");

/**子选择器****/

$("ul li:nth-child(1)").css("background-color","green");

$("ul li:first-child").css("background-color","darkred");

$("ul li:last-child").css("background-color","darkred");

$("ul li:only-child").css("background-color","#00A40C");

1.6 选择器学习 D

//type属性等于text

$("input[type=text]").css("background-color","#00A40C");

// name属性用z开头的

$("input[name^=z]").css("background-color","#FF0000");

// name属性同d结尾的

$("input[name$=d]").css("background-color","green");

//name属性中包含p 的元素

$("input[name*=p]").css("background-color","green");

//复合属性选择器，需要同时满足多个条件时使用

$("input[type=text][name^=z]").css("background-color","deeppink");

1.7 选择器学习 E

// √ 获得form表单中的所有的表单项 √

var inp= $(":input")

//获得标签名称是input 的所有的标签对象

var inp2=$("input"); alert(inp.length+"----"+inp2.length);

$("input[type=text]")

// √ input标签 type属性等于text所对应的对象 √

$(":text").css("background-color","green");

$(":password").css("background-color","red");

/** 表单属性选择器***/

//获得input标签中含有disabled属性的对象

var but= $("input:disabled"); alert(but.val());

//√ 获得含有checked属性的对象 √

var ch =$("input:checked");

1.8 操作页面的样式 A

//获得div对象

var div =$("#div1");

//获得css样式

var wid=div.css("width");

var hi=div.css("height"); console.log(wid+"----"+hi);

//操作元素对象的

css div.css("width","400px");

div.css("height","500px");

div.css("background-color","red");

div.css("backgroundColor","red");

//以上内容的综合---{key1:value1,key2:value2}---json数据格式

div.css({'width':'300px','height':'300px','background-color':'red'});

1.9 操作页面的样式 B

如果当页面中的css样式比较多的时候可以通过添加类的方式添加样式，方法如下：两种 $("#bu1").click(function(){ ​

//获得div对象 --通过添加类的方式添加css样式 ​

//第一种

​ $("#div1").attr("class","div");

​ //第一种

​ $("#div1").addClass("div"); ​

})

1.10 操作页面元素的属性 A

$("#bu1").click(function(){ ​

//获得元素对象 ​

var tex=$("#inp1"); ​

//获得元素对象的属性 ​

var te=tex.attr("type"); ​

var cl =tex.attr("class"); ​

//获得元素固有的属性值 ​

var val =tex.attr("value"); ​

console.log(te+"------"+cl+"-----"+val); ​

//获得文本框实时输入的值 ​

var val2=tex.val(); ​

//alert(val2); ​

}

1.11 操作页面元素的属性 B

tex.attr("type","button");

tex.attr("value","测试按钮");

//支持json数据格式

tex.attr({"type":"button","value":"测试按钮"});

var ch= $("#fav").attr("checked");

var flag=$("#fav").prop("checked",true);

1.12 操作页面的文本和值 A

//获得div元素对象

var div =$("#div1");

//获得元素的内容 含有HTML的标签的

var ht=div.html(); console.log(ht);

//只是获得文本内容， 不含有HTML标签

var te =div.text(); console.log(te);

//获得文本框的值

var val=$("#inp1").val();

console.log(val);

1.13操作页面的文本和值 B

可以识别里面的html代码

div.html("我们都爱笑");

识别不了里面的HTML代码

div.text(div.text()+"我们都爱笑");

获得文本的值 $("#inp1").val("sxt");

注意特殊情况：

Select 、 textarea 两个标签获得值得时候需要用val()

1.14操作页面的元素 A

//创建了新的元素 var p=$("

List Item0

")

//增加子元素 ---现有元素之后

$("#div1").append(p);

//把p元素增加到 div里面

p.appendTo("#div1");

//添加内部的子元素 ---现有元素之前

$("#div1").prepend(p); p.prependTo("#div1");

//平级的添加元素---现有元素之前

p.insertBefore("#div1");

$("#div1").before(p);

//平级的添加元素---现有元素之后

p.insertAfter("#div1");

$("#div1").after(p);

1.15操作页面的元素 B

/**替换指定的节点**/

$("div p:nth-child(1)").replaceWith(p);

p.replaceAll("div p:nth-child(5)");

/**删除指定的节点元素**/

//删除指定的元素

$("#div1").remove();

$("div p:nth-child(3)").remove();

//清空内容

$("#div1").empty();

$("div p:nth-child(2)").empty();

1.16操作页面的元素 C

1.17 事件处理 A

/页面加载完执行的操作/

$(function(){}) jQuery(function(){})

$(document).ready(function(){})

$(function(){ ​

/***事件的基础绑定***/ ​

$("#bu1").click(function(){

​ alert("单击事件"); ​

})

$("#bu1").dblclick(function(){

​ alert("双击事件"); ​

})

/***bind事件绑定***/

$("#bu2").bind('click',function(){

​ alert("单击事件绑定");

​ }) ​

//内容还支持json数据格式 ​

$("#bu2").bind({

​ 'click':function(){}, ​

'dblclick':function(){}, ​

'blur':function(){}

​ })

/***one一次事件绑定***/

$("#bu3").one('click',function(){ ​

alert("一次事件绑定");

​ })

1.18 事件处理 B

/*trigger事件操作**/

$("#bu4").click(function(){

​ $("#bu1").trigger('dblclick');

​ $("#bu3").trigger('click');

​ })

/**事件的解绑***/

$("#bu5").click(function(){

​ //事件的解绑

​ //解绑指定对象上的所有事件

​ $("#bu1").unbind();

​ //解绑指定的事件

​ $("#bu1").unbind("dblclick");

​ })

$(".bu6").click(function(){

​ alert("单击事件的绑定"); ​

})

$(".bu6").live('click',function(){

​ alert("单击事件绑定");

​ })

$("body").append('');

1.19 动画功能 A

//获得div对象

var div1 =$("#div1");

//3s隐藏动画

div1.hide(3000);

div1.show(3000);

//隐藏的显示 ---显示的隐藏

//$("div").toggle(3000);

//滑动上 div1.slideUp(3000);

//滑动下 div1.slideDown(3000);

//滑动上--滑动下 滑动下---滑动上

$("div").slideToggle(3000);

//淡出

div1.fadeOut(3000);

//淡入

div1.fadeIn(3000);

1.20 动画功能 B

//获得div对象

var div1 =$("#div1");

//3s隐藏动画

div1.hide(3000); div1.show(3000);

//隐藏的显示 ---显示的隐藏

//$("div").toggle(3000);

//滑动上 div1.slideUp(3000);

//滑动下 div1.slideDown(3000);

//滑动上--滑动下 滑动下---滑动上

$("div").slideToggle(3000);

//淡出

div1.fadeOut(3000);

//淡入

div1.fadeIn(3000);

1.21 无笔记

1.22 Jquery 的封装原理

jQuery中的封装原理

匿名函数的自调用

闭包原理

闭包的优点：

1、可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护

2、 防止可修改变量， 因为内部的变量外部是无法访问的，并且也不可修改的。安全

3、 读取函数内部的变量， 另一个就是让这些变量的值始终保持在内存中。

参考网址： https://www.cnblogs.com/sq45711478/p/5990347.html