JS闯关之路让前端飞Web前端之路

jQuery体验

2017-06-12  本文已影响51人  icessun

jQuery是一个轻量级的js库，jQuery的所有功能都可以通过JavaScript进行访问，兼容大多数浏览器，使得对html的文档遍历和操作，事件的处理，动画和Ajax操作更加简单

注意两点

  • 调用jQuery的方法，即，使用$()来调用的方法都是在$.fn的命名空间中,指向到jQuery原型上面，或者说是jQuery上面的原型方法，即jQuery对象上的方法；并且会自动接收返回的this；原型上面只能实例使用；$()返回的是实例，所有原型上面的方法中的this都指向实例
  • 使用$来调用的方法，不适用选择，不会自动传递参数，返回值会有不同；比如：$.trim()：去掉前后空格；$.each()：遍历数组和对象；$.extend(前对象，后对象)：使用后对象的属性改变前对象的属性，都有相同属性的前提下

效率

原生js的效率要比jQuery低

 window.onload=function(){
            var oDiv=document.getElementById('div');
            alert('我是原生JS')
        };

 $(document).ready(function(){
            console.log($('.div1'))
            alert('我是jquery')
        })
// 或者这种写法
$(function(){
  alert('我是jquery')
//....js代码})

从上面的代码可以知道，先弹出我是jquery，接着在弹出我是原生js，这就说明jquery的效率要比原生的js效率高，它们获取DOM元素的方式也不一样；在此可以知道：Window.onload是等页面所有的内容（视频，音频，DOM结构，图片）都加载完成的时候，才执行js代码；而$(document).ready(function(){js代码})是只要DOM结构加载完成，就开始执行js代码

选择器

jQuery实现的选项卡

以前使用过原生的JS实现了选项卡，基本上的思路是：获取要操作的元素，for循环遍历，在遍历的时候执行事件操作，当然在循环的时候执行异步的事件操作的时候，循环里面的i值是错误的，可以通过闭包或者自定义属性的方法来把正确的i值传递给事件，当点击的时候，先把所有的样式去掉，然后给点击元素加上点击的样式，对应的内容区域显示

<div class="wrap">
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div class="show">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>

       .wrap{
            width: 600px;
            height:300px;
            font-size: 20px;
        }
        .wrap button{
            width: 200px;
            height: 40px;
            float: left;
            font-size: 20px;
        }
        .wrap button.active{
            background: lightblue;
        }
        .wrap div{
            width: 100%;
            height: 260px;
            clear: both;
            display: none;
            background: lightblue;
        }
        .wrap div.show{
            display: block;
        }

$('button').click(function(){   
      $(this).addClass('active').siblings('button').removeClass('active'); // 按钮点击的时候给其添加active样式，并且其余的兄弟元素除掉active样式
$('.wrap div').eq($(this).index()).addClass('show').siblings('div').removeClass('show'); 
    })

取值赋值合体

区分val()和html()

  • val针对表单元素的值；input textarea select
  • html针对普通标签元素的值；div p span h1

jquery与js之间的转换

js和jQuery是可以转换的，把js转为jquery就是把js代码用$(JS对象)包裹起来，jquery转js就是把获取的一堆jquery对象在后面[index] 或者 get(inedx)

 var $aDiv=$('div');// 这个是获取的jquery对象，一堆的div元素 ；但是不用遍历，直接使用`css`方法：$aDiv.css('background','bule');

// jquery转为js
$aDiv.get(i) 或者 $aDiv[i]  -----> 接着js转为`jQuery`对象：$( $aDiv[i])才能继续使用`jQuery`对象的方法来操作`CSS`：$( $aDiv[i]).css('background','red')

jQuery的DOM方法

动态创建一个元素：

$('<div></div>') 或者 $('<div>')

创建的元素插入到页面中：功能相同，针对的主体不一样

对应的有：

获取body的方法：$('body')

jQuery的数据交互

$.ajax({})

表格操作提交，一定要有name值
<form action='提交的地址：www.baidu.com' target='_blank'>
   <lable for='username'>
   用户名：<input type='text' name='这个地方告诉后台用户输入了什么数据username' id='就是跟lable中的for一样，这样才能点击lable输入框聚焦：username'>
</lable>

  <lable for='password'>
   密码：<input type='password' name='这个地方告诉后台用户输入了什么数据password' id='就是跟lable中的for一样，这样才能点击lable输入框聚焦：password'>
</lable>

<p><input type='submit' value='提交数据'></p>
</form>

$('input[type=button]').click(function(){
    $.ajax({
       url:'json/data.txt?'+Math.random(),// 请求地址，加随机数，来清除缓存
   
type:'get',// 请求方式
dataType:'json',// 返回数据的格式
async:  true,// 是否异步  不写默认异步（true），同步（false）
data:`username=${$('#username').val()}&password=${$('#password').val()}`,// 模版字符串拼接（手写） 给后台传递的参数，获取提交的数据
// data:$('form').serialize(); 表格序列化，一样的功能，帮忙实现了一个key=value的键值对的字符串
success:function(val){
    var data=val;
    console.log(data);
 }, // 请求成功
 error:function(val){
     // 请求失败 
}

     })
 })

动画

事件绑定

  • on(事件，事件行为)：绑定事件（可以执行多次）----$('div').on('click',fn2)
  • one(type,fn)：绑定事件（只能执行一次）
  • off(什么事件，事件的行为(具体的函数，有名函数))：解除绑定（只能解除有名字的函数）----$('div').off('click',fn2)

插件（直接调用就可以）

选项卡插件
// 作为一个插件，就是要成为jquery的组件，方法就应该不能写死
// 静态方法的添加，extend：扩展
$.extend({
      tab:function(ele){
          var $aBtn=$(ele).find('button');
          var $aDiv=$(ele).find('div');
          $aBtn.click(function){
              $(this).addClass('active').siblings('button').removeClass('active');
              $aDiv.eq($(this).index()).addClass('show').siblings().removeClass('show');
           }
       }
   })

// 调用插件，直接在代码里面引入js代码，执行`$.tab(.wrap)`就行，选项卡插件


$.fn.extend({
      tab:function(){
          var $aBtn=this.find('button');
          var $aDiv=this.find('div');
          $aBtn.click(function){
              $(this).addClass('active').siblings('button').removeClass('active');
              $aDiv.eq($(this).index()).addClass('show').siblings().removeClass('show');
           }
       }
   })

// 在代码里面调用，引入js文件，执行`$('.tab1').tab()`,实例调用

jQuery的each()方法

想要知道一个方法传入了什么参数，使用arguments打印出来；想知道参数是原生的js对象还是jQuery对象，把参数打印出来，原生js对象是标签之类的，只有foreach()方法来遍历数组对象，jQuery对象是数组之类的

上一篇下一篇

猜你喜欢

热点阅读