网页编程----JQUERY

jQuery

一、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 日）

二、jQuery 中$的含义

作用 1：$(function){}
1.相当于 window.οnlοad=function(){}
2.功能比window.onload更强大

1. window onload一个页面只能写一个,但是可
   以写多个$() 而不冲突
2. window onload要等整个页面加载完后再执
   行（包括图片、超链接、音视频等），
   但是$的执行时间要早3.完整形式是$(document).ready(…….);
   作用 2：$(selector)
   选择器
   jQuery具有强大的选择器功能
   其他作用后续用到再总结

三、选择器学习

对象之间的转换
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”)
 通配选择器 KaTeX parse error: Unexpected character: '' at position 7: ("*") ̲ 并集选择器(“elem1,elem2,elem3”)
 后代选择器 $(ul li)
 父子选择器 $(ul>li)
 后面第一个兄弟元素 prev + nex

 后面所有的兄弟元素 prev ~ next

//只是第一行变颜色
$(“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");

//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”,“deep
pink”);

// √ 获得form表单中的所有的表单项
var inp= $(":input")//获得标签名称是input的所有的标签对象varinp2=$(“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());//\surd 获得含有checked属性的对象varch=$(“input:checked”);

四、操作页面的样式

//获得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','backgrou
nd-color':'red'});

如果当页面中的css样式比较多的时候可以通过添加类的方
式添加样式，方法如下：两种
$("#bu1").click(function(){
//获得div对象 --通过添加类的方式添加css样式
//$("#div1").attr("class","div");
$("#div1").addClass("div");
})

五、操作页面元素的属性

$("#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);
}


tex.attr("type","button");
tex.attr("value","测试按钮");
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);

六、操作页面的文本和值

//获得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);


可以识别里面的html代码
div.html("<b>我们都爱笑</b>");
识别不了里面的HTML代码
div.text(div.text()+"<b>我们都爱笑</b>");
获得文本的值
$("#inp1").val("sxt");

注意特殊情况：
Select 、textarea 两个标签获得值得时候需要用val()

七、操作页面的元素

//创建了新的元素
var p=$("<p> <b>List Item0</b> </p>")
//增加子元素 ---现有元素之后
$("#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);
操作页面的元素 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();

八、事件处理

/*页面加载完执行的操作*/
$(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("一次事件绑定");
})
事件处理 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('<input type="button" name=""
id="" class="bu6" value="事件操作 2" />');

九、动画功能 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);

动画功能 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);
 

十、Jquery 的封装原理

<h1>jQuery中的封装原理</h1>
<h3>匿名函数的自调用</h3>
<h3>闭包原理</h3>


闭包的优点：

 1、可以减少全局变量的对象，防止全局变量过去庞大，
导致难以维护
 2、防止可修改变量，因为内部的变量外部是无法访问的，
并且也不可修改的。安全
 3、读取函数内部的变量，另一个就是让这些变量的值始
终保持在内存中。
参考网址：
https://www.cnblogs.com/sq45711478/p/5990347.html