JQuery基础（一）

 

1.JQuery的介绍

jQuery是一个js文件，是javascript的函数库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

 

2.JQuery加载

引入：

1 <script type="text/javascript">
2     var oDiv = document.getElementById('div1');
3     alert(oDiv);
4 </script>
5 <div id="div1">这是一个div元素</div>

上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。

在JavaScript中通常解决方法：1.js代码放最下面；2.设置页面加载完成执行的函数（Window.load函数）

 

jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

1 <script type="text/javascript">
2 
3 $(document).ready(function(){
4 
5      ......
6 
7 });
8 
9 </script>

可以简写为：

1 <script type="text/javascript">
2 
3 $(function(){
4 
5      ......
6 
7 });
8 
9 </script>

3.jquery选择器

jquery用法思想一

选择某个网页元素，然后对它进行某种操作

 

jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

1 $('#myId') //选择id为myId的网页元素
2 $('.myClass') // 选择class为myClass的元素
3 $('li') //选择所有的li元素
4 $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
5 $('input[name=first]') // 选择name属性等于first的input元素

对选择集进行过滤

1 $('div').has('p'); // 选择包含p元素的div元素
2 $('div').not('.myClass'); //选择class不等于myClass的div元素
3 $('div').filter('.myClass'); //选择class等于myClass的div元素
4 $('div').eq(5); //选择第6个div元素

选择集转移

1 $('div').prev(); //选择div元素前面紧挨的同辈元素
2 $('div').prevAll(); //选择div元素之前所有的同辈元素
3 $('div').next(); //选择div元素后面紧挨的同辈元素
4 $('div').nextAll(); //选择div元素后面所有的同辈元素
5 $('div').parent(); //选择div的父元素
6 $('div').children(); //选择div的所有子元素
7 $('div').siblings(); //选择div的同级元素
8 $('div').find('.myClass'); //选择div内的class等于myClass的元素

判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素

1 var $div1 = $('#div1');
2 var $div2 = $('#div2');
3 alert($div1.length); // 弹出1
4 alert($div2.length); // 弹出0
5 ......
6 <div id="div1">这是一个div</div>

4.JQuery样式操作

jquery用法思想二

同一个函数完成取值和赋值

 

操作行间样式

1 // 获取div的样式
2 $("div").css("width");
3 $("div").css("color");
4 
5 //设置div的样式
6 $("div").css("width","30px");
7 $("div").css("height","30px");
8 $("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

1 $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
2 $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
3 $("#div1").removeClass("divClass divClass2") //移除多个样式
4 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

5.绑定click事件

给元素绑定click事件，可以用如下方法：

1 $('#btn1').click(function(){
2 
3     // 内部的this指的是原生对象
4 
5     // 使用jquery对象用 $(this)
6 
7 })

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

 1 var $li = $('.list li').eq(1);
 2 alert($li.index()); // 弹出1
 3 ......
 4 <ul class="list">
 5     <li>1</li>
 6     <li>2</li>
 7     <li>4</li>
 8     <li>5</li>
 9     <li>6</li>
10 </ul>

6.jquery特殊效果

  • fadeIn() 淡入
  • fadeOut() 淡出
  • fadeToggle() 切换淡入淡出
  • hide() 隐藏元素
  • show() 显示元素
  • toggle() 切换元素的可见状态
  • slideDown() 向下展开
  • slideUp() 向上卷起
  • slideToggle() 依次展开或卷起某个元素
1     $btn.click(function(){
2 
3         $('#div1').fadeIn(1000,'swing',function(){
4             alert('done!');
5         });
6 
7     });

7.jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

1 $('#div1') // id为div1的元素
2 .children('ul') //该元素下面的ul子元素
3 .slideDown('fast') //高度从零变到实际高度来显示ul元素
4 .parent()  //跳到ul的父元素，也就是id为div1的元素
5 .siblings()  //跳到div1元素平级的所有兄弟元素
6 .children('ul') //这些兄弟元素中的ul子元素
7 .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

8.jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

1 $('#div1').animate({
2     width:300,
3     height:300
4 },1000,'swing',function(){
5     alert('done!');
6 });

参数可以写成数字表达式：

1 $('#div1').animate({
2     width:'+=100',
3     height:300
4 },1000,'swing',function(){
5     alert('done!');
6 });

9.尺寸相关、滚动事件

1、获取和设置元素的尺寸

  • width()、height() 获取元素width和height
  • innerWidth()、innerHeight() 包括padding的width和height
  • outerWidth()、outerHeight() 包括padding和border的width和height
  • outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

  • offset()

10.jquery属性操作

1、html() 取出或设置html内容

1 // 取出html内容
2 
3 var $htm = $('#div1').html();
4 
5 // 设置html内容
6 
7 $('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

1 // 取出图片的地址
2 
3 var $src = $('#img1').prop('src');
4 
5 // 设置图片的地址和alt属性
6 
7 $('#img1').prop({src: "test.jpg", alt: "Test Image" });

11.jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

 1 $(function(){
 2     $('.list li').each(function(i){
 3         $(this).html(i);
 4     })
 5 })
 6 ......
 7 <ul class="list">
 8     <li></li>
 9     <li></li>
10     <li></li>
11     <li></li>
12     <li></li>
13     <li></li>
14 </ul>

12.jquery事件

事件函数列表：

  • blur() 元素失去焦点
  • focus() 元素获得焦点
  • click() 鼠标单击
  • mouseover() 鼠标进入（进入子元素也触发）
  • mouseout() 鼠标离开（离开子元素也触发）
  • mouseenter() 鼠标进入（进入子元素不触发）
  • mouseleave() 鼠标离开（离开子元素不触发）
  • hover() 同时为mouseenter和mouseleave事件指定处理函数
  • ready() DOM加载完成
  • resize() 浏览器窗口的大小发生改变
  • scroll() 滚动条的位置发生变化
  • submit() 用户递交表单

绑定事件的其他方式

1 $(function(){
2     $('#div1').bind('mouseover click', function(event) {
3         alert($(this).html());
4     });
5 });

取消绑定事件

1 $(function(){
2     $('#div1').bind('mouseover click', function(event) {
3         alert($(this).html());
4 
5         // $(this).unbind();
6         $(this).unbind('mouseover');
7 
8     });
9 });

13.事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

 1 $(function(){
 2     var $box1 = $('.father');
 3     var $box2 = $('.son');
 4     var $box3 = $('.grandson');
 5     $box1.click(function() {
 6         alert('father');
 7     });
 8     $box2.click(function() {
 9         alert('son');
10     });
11     $box3.click(function(event) {
12         alert('grandson');
13         event.stopPropagation();
14 
15     });
16     $(document).click(function(event) {
17         alert('grandfather');
18     });
19 })
20 
21 ......
22 
23 <div class="father">
24     <div class="son">
25         <div class="grandson"></div>
26     </div>
27 </div>

阻止默认行为
阻止表单提交

1 $('#form1').submit(function(event){
2     event.preventDefault();
3 })

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

1 // event.stopPropagation();
2 // event.preventDefault();
3 
4 // 合并写法：
5 return false;

14.事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

 

一般绑定事件的写法

 1 $(function(){
 2     $ali = $('#list li');
 3     $ali.click(function() {
 4         $(this).css({background:'red'});
 5     });
 6 })
 7 ...
 8 <ul id="list">
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12     <li>4</li>
13     <li>5</li>
14 </ul>

事件委托的写法

 1 $(function(){
 2     $list = $('#list');
 3     $list.delegate('li', 'click', function() {
 4         $(this).css({background:'red'});
 5     });
 6 })
 7 ...
 8 <ul id="list">
 9     <li>1</li>
10     <li>2</li>
11     <li>3</li>
12     <li>4</li>
13     <li>5</li>
14 </ul>

15.jquery元素节点操作

创建节点

1 var $div = $('<div>');
2 var $div2 = $('<div>这是一个div元素</div>');

插入节点

  • 1、append()和appendTo()：在现存元素的内部，从后面插入元素
1 var $span = $('<span>这是一个span元素</span>');
2 $('#div1').append($span);
3 ......
4 <div id="div1"></div>
  • 2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
  • 3、after()和insertAfter()：在现存元素的外部，从后面插入元素
  • 4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

1 $('#div1').remove();

16.滚轮事件与函数节流

jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

17.json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

 

javascript自定义对象：

1 var oMan = {
2     name:'tom',
3     age:16,
4     talk:function(s){
5         alert('我会说'+s);
6     }
7 }

json格式的数据：

1 {
2     "name":"tom",
3     "age":18
4 }

与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

 

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

["tom",18,"programmer"]

18.ajax与jsonp

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

$.ajax使用方法
常用参数：

  • 1、url 请求地址
  • 2、type 请求方式，默认是'GET'，常用的还有'POST'
  • 3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
  • 4、data 设置发送给服务器的数据
  • 5、success 设置请求成功后的回调函数
  • 6、error 设置请求失败后的回调函数
  • 7、async 设置是否异步，默认值是'true'，表示异步
以前的写法： 新的写法(推荐)： 
 1 $.ajax({
 2     url: 'js/data.json',
 3     type: 'GET',
 4     dataType: 'json',
 5     data:{'aa':1}
 6     success:function(data){
 7         alert(data.name);
 8     },
 9     error:function(){
10         alert('服务器超时，请重试！');
11     }
12 });
 
 1 $.ajax({
 2     url: 'js/data.json',
 3     type: 'GET',
 4     dataType: 'json',
 5     data:{'aa':1}
 6 })
 7 .done(function(data) {
 8     alert(data.name);
 9 })
10 .fail(function() {
11     alert('服务器超时，请重试！');
12 });
13 
14 // data.json里面的数据： {"name":"tom","age":18}

jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

 1 $.ajax({
 2     url:'js/data.js',
 3     type:'get',
 4     dataType:'jsonp',
 5     jsonpCallback:'fnBack'
 6 })
 7 .done(function(data){
 8     alert(data.name);
 9 })
10 .fail(function() {
11     alert('服务器超时，请重试！');
12 });
13 
14 // data.js里面的数据： fnBack({"name":"tom","age":18});

课堂实例
获取360搜索关键词联想数据

 1 $(function(){
 2     $('#txt01').keyup(function(){
 3         var sVal = $(this).val();
 4         $.ajax({
 5             url:'https://sug.so.360.cn/suggest?',
 6             type:'get',
 7             dataType:'jsonp',
 8             data: {word: sVal}
 9         })
10         .done(function(data){
11             var aData = data.s;
12             $('.list').empty();
13             for(var i=0;i<aData.length;i++)
14             {
15                 var $li = $('<li>'+ aData[i] +'</li>');
16                 $li.appendTo($('.list'));
17             }
18         })        
19     })
20 })
21 
22 //......
23 
24 <input type="text" name="" id="txt01">
25 <ul class="list"></ul>

19.本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage

1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

jquery 设置cookie

$.cookie('mycookie','123',{expires:7,path:'/'});

jquery 获取cookie

$.cookie('mycookie');

 

2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

 1 //设置：
 2 localStorage.setItem("dat", "456");
 3 localStorage.dat = '456';
 4 
 5 //获取：
 6 localStorage.getItem("dat");
 7 localStorage.dat
 8 
 9 //删除
10 localStorage.removeItem("dat");

3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

iPhone的无痕浏览不支持Web Storage，只能用cookie。

 

20.jqueryUI

jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUI 网址
http://jqueryui.com/

 

 

END

posted @ 2020-09-06 21:55  云谷の风  阅读(71)  评论(0)  编辑  收藏  举报