jQuery的小白教程

1.jQuery

jQuery是目前使用最广泛的javascript函数库，也是最长寿的库，全球80%的网站都在用。
jQuery的口号和愿望 Write Less, Do More（写得少，做得多），
下面让我们一起了解一下jQuery

2.jQuery的使用

1.引入jQuery
//路径引入

//引入在线资源

2.入口函数

$(document).ready(function(){
//类似于原生js的window.onload
});
简写
$(function(){ });

3.jQuery选择器

设计思想一：
选择某个网页元素，然后对其进行某种操作（选择网页元素）
jQuery选择器可以快速的选中元素，他的选择表达式可以是css选择器，也可以实jQuery特有的表达式
//css选择器
$(document) //选择整个文档对象
$(’#myId’) //选择ID为myId的网页元素
$(‘div.myClass’) // 选择class为myClass的div元素
$(‘input[name=first]’) // 选择name属性等于first的input元素

//jQuery特有选择器
$(‘a:first’) //选择网页中第一个a元素
$(‘tr:odd’) //选择表格的奇数行
$(’#myForm :input’) // 选择表单中的input元素
$(‘div:visible’) //选择可见的div元素
$(‘div:animated’) // 选择当前处于动画状态的div元素
设计思想二：
提供各种强大的过滤器，对结果集进行筛选，缩小选择结果（改变结果）
$(‘div’).has(‘p’); // 选择包含p元素的div元素
$(‘div’).not(’.myClass’); //选择class不等于myClass的div元素
$(‘div’).filter(’.myClass’); //选择class等于myClass的div元素
$(‘div’).first(); //选择第1个div元素
${(}^{\prime }di{v}^{\prime }).eq(5);//选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法$(‘div’).next(‘p’); //选择div元素后面的第一个p元素
　　${(}^{\prime }di{v}^{\prime }).parent();//选择div元素的父元素$(‘div’).children(); //选择div的所有子元素
　　${(}^{\prime }di{v}^{\prime }).siblings();//选择div的同级元素4.jQuery的链式操作设计思想三：选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。$(‘div’) //找到div元素
　　　.find(‘h3’) //选择其中的h3元素
　　　.eq(2) //选择第3个h3元素
　　　.html(‘Hello’); //将它的内容改为Hello
jQuery还提供了.end()方法,可以回到上一步的选择器，操作上一步的选择器
　　$(‘div’)
　　　.find(‘h3’)
　　　.eq(2)
　　　.html(‘Hello’)
.end() //退回到选中所有的h3元素的那一步
　　　.eq(0) //选中第一个h3元素
　　　.html(‘World’); //将它的内容改为World
　　　
5.样式的操作

设计思想四：
使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定
操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。而jQuery的设计可以根据传入的参数来确定是读取值，还是进行赋值
　　${(}^{\prime }h{1}^{\prime }).html();//html()没有参数，表示取出h1的值$(‘h1’).html(‘Hello’); //html()有参数Hello，表示对h1进行赋值
常见的取值与赋值函数：
.html() 取出或设置html内容
// 取出html内容
let $htm = $(’#div1’).html();
// 设置html内容
$(’#div1’).html(‘添加文字’);
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

6.事件操作

设计思想五：
把事件直接绑定在网页元素之上
　　${(}^{\prime }butto{n}^{\prime }).click(function()alert{(}^{\prime }Helloworl{d}^{\prime }););支持的事件函数列表.blur()表单元素失去焦点。.change()表单元素的值发生变化.click()鼠标单击.dblclick()鼠标双击.focus()表单元素获得焦点.focusin()子元素获得焦点.focusout()子元素失去焦点.hover()同时为mouseenter和mouseleave事件指定处理函数.keydown()按下键盘（长时间按键，只返回一个事件）.keypress()按下键盘（长时间按键，将返回多个事件）.keyup()松开键盘.load()元素加载完毕.mousedown()按下鼠标.mouseenter()鼠标进入（进入子元素不触发）.mouseleave()鼠标离开（离开子元素不触发）.mousemove()鼠标在元素内部移动.mouseout()鼠标离开（离开子元素也触发）.mouseover()鼠标进入（进入子元素也触发）.mouseup()松开鼠标.ready()DOM加载完成.resize()浏览器窗口的大小发生改变.scroll()滚动条的位置发生变化.select()用户选中文本框中的内容.submit()用户递交表单.toggle()根据鼠标点击的次数，依次运行多个函数.unload()用户离开页面以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：$(‘input’).bind(
　　　　‘click change’, //同时绑定click和change事件
　　　　function() {
　　　　　　alert(‘Hello’);
　　　　}
　　);
解除绑定：
　　$(‘input’).unbind(‘click’);
　　
7.特殊效果

$(‘h1’).show(); //展现一个h1标题
常见的特殊效果：
.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素