入门jQuery
1.jQuery操作文本值
1.1 html([val | fn]) 和原生JS中innerHTML一样，对html文本值进行操作，输入含有标签的元素会自动插在自己设置的div容器的网页的html中。代码图像如下所示。
varbtns=document.getElementsByTagName('button'); btns[0].onclick=function (){ $('div').html('<p>我是段落<span>我是span</span></p>') } //第一个按钮<button>设置html</button> <divstyle="width: 100px;height: 100px;border: 1px solid #000;"></div>
1.2 text([val | fn])和html([val | fn])类似，和原生JS中的innerText一摸一样，输入的文本内容会自动插入自己设置的div容器里面，书写相关标签元素也会当作文本内容插入，代码图像如下所示。
varbtns=document.getElementsByTagName('button'); btns[0].onclick=function (){ $('div').text('<p>我是段落<span>我是span</span></p>') } //第一个按钮<button>设置text</button><divstyle="width: 100px;height: 100px;border: 1px solid #000;"></div>
1.3 val([val | fn | arr])文本内容在网页输入，打印在控制台
varbtns=document.getElementsByTagName('button'); btns[0].onclick=function (){ $('input').val('请输入内容') } btns[1].onclick=function (){ console.log($('input').val()); } //第一个和第二个按钮<button>设置value</button><button>获取value</button><divstyle="width: 100px;height: 100px;border: 1px solid #000;"></div><inputtype="text">
2.jQuery操作CSS样式
2.1 逐个设置
$('div').css('width','100px'); $('div').css('height','100px'); $('div').css('background','red');
2.2 链式设置 （ps：链式设置如果大于三步建议分开，否则阅读性会变差！）
$('div').css('width','100px').css('height','100px').css('background','blue');
2.3 批量设置
$('div').css({ width:"100px", height:'100px', background:'green'});
2.4 在控制台获取css样式值，譬如：
console.log($("div").css("width"));
3.jQuery位置和尺寸操作
举个例子，在网页上设置两个包含关系的块盒，为了方便排版，设置内样式
<divclass="father"style="width: 200px;height: 200px;background: red;border: 50px solid #000;margin-left: 50px;position: relative"><divclass="son"style="width: 100px;height: 100px;background: blue;position: absolute;left: 50px;top: 50px"></div></div><button>获取</button><button>设置</button>
3.1 位置操作
varbtns=document.getElementsByTagName('button'); //监听获取btns[0].onclick=function (){ //获取元素的宽度console.log($('.father').width()); //offset([coordinates]) 作用：获取元素距离窗口的偏移量// console.log($('.son').offset().left);//position() 作用：获取元素距离定位元素的偏移量// console.log($('.son').position().left);}
3.2 尺寸操作
//监听设置btns[1].onclick=function (){ //设置元素的宽度// $('.father').width('500px')$('.son').offset({ left:10 }); //注意点：position方法只能获取不能设置$('.son').position({ left:10 }); }
4.jQuery的scrollTop方法
一样，依然设置html内容，一个容器和两个按钮，这里讲解一下小知识，前端工程师为了测试页面某些区域的容错量，一般都会写“lorem +Tab键”生成一堆乱英文充满区域，数量不够也可以lorem+数字 +Tab键即可，像border: 1px solid #000;最常见的边框设置，也可以通过bd+ +Tab键快速生成
<divclass="scroll"style="width: 100px;height: 100px;border: 1px solid #000;overflow: auto">Loremipsumdolorsitamet, consecteturadipisicingelit. Abautembeataecommodiconsequunturdeseruntdistinctiodoloremea, facerefugitharumilloinipsaliberonemoodioquamrerumsaepevoluptatibus. </div><button>获取</button><button>设置</button>
4.1 获取滚动偏移位数值在控制台输出
varbtns=document.getElementsByTagName('button'); btns[0].onclick=function (){ // console.log($('.scroll').scrollTop());//注意点：为了保证浏览器的兼容性，获取网页滚动的偏移位需按照如下写法console.log($('body').scrollTop()+$('html').scrollTop()); }
4.2 设置滚动的偏移位
btns[1].onclick=function (){ //注意点：为了保证浏览器的兼容性，设置网页滚动的偏移位需按照如下写法// $('.scroll').scrollTop(300);$('html,body').scrollTop(300); }
5.jQuery事件绑定与解绑
5.1 jQuery中的两种绑定方式和特点： 1、eventName(fn); 编码效率略高/部分事件jQuery没有实现，所以不能添加。2、on(eventName,fn);编码效率略低/所有js事件都可以添加。 注意点：两者都可以添加多个相同或者不同类型的事件，不会覆盖。
$('button').click(function (){ alert('hello world') }); $('button').on('click',function (){ alert('hello people') }); //另一种写法：譬如functiontest1(){ alert('nice to meet you') } $('button').click(test1);
5.2 jQuery的解绑，off()方法：三种方法：1、不传参，会删除所有参数 2、传递一个参数，会移除指定类型的事件 3、传递俩个参数，会移除指定类型的指定事件。 譬如：
$('button').off(); $('button').off('click'); $('button').off('click',test1);
