js库jquery的认识了解

jquery的认识

• jquery是目前使用最广泛的javascript函数库

• 参考jquery中方文档： http://jquery.cuishifeng.cn/

• 调用

  <script type="text/javascript" src="jquery-1.12.2.js"></script>
  <script type="text/javascript">
      
      $(function(){          // 操作
  	
  });
  
      
  </script>    
  

• 常用选择器

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

• 对选择集进行过滤

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

  ​

• 选择集转移

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

• jquery样式操作

  // 获取div的样式
  $("div").css("width");
  $("div").css("color");
  
  //设置div的样式
  $("div").css("width","30px");
  $("div").css("height","30px");
  $("div").css({fontSize:"30px",color:"red"});
  
  // 操作样式类名
  $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
  $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
  $("#div1").removeClass("divClass divClass2") //移除多个样式
  $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
  

• jquery事件

  // 放在$(function(){})中
  $('#btn1').click(function(){
  
      // 内部的this指的是原生对象
  
      // 使用jquery对象用 $(this)
  
  })
  
  
  blur() 元素失去焦点
  focus() 元素获得焦点
  click() 鼠标单击
  mouseover() 鼠标进入（进入子元素也触发）
  mouseout() 鼠标离开（离开子元素也触发）
  mouseenter() 鼠标进入（进入子元素不触发）
  mouseleave() 鼠标离开（离开子元素不触发）
  hover() 同时为mouseenter和mouseleave事件指定处理函数
  ready() DOM加载完成
  resize() 浏览器窗口的大小发生改变
  scroll() 滚动条的位置发生变化
  submit() 用户递交表单
  change() 改变时发生变化
  

• jquery效果

  fadeIn() 淡入
  
      $btn.click(function(){
  
          $('#div1').fadeIn(1000,'swing',function(){
              alert('done!');
          });
  
      });
  
  fadeOut() 淡出
  fadeToggle() 切换淡入淡出
  hide() 隐藏元素
  show() 显示元素
  toggle() 切换元素的可见状态
  slideDown() 向下展开
  slideUp() 向上卷起
  slideToggle() 依次展开或卷起某个元素
  
  // 动画
  $('#div1').animate({
      width:300,
  	// width:'+=100',
      height:300
  },1000,'swing',function(){
      alert('done!');
  });
  
  

• jquery的属性操作

  // 取出html内容
  
  var $htm = $('#div1').html();
  
  // 设置html内容
  
  $('#div1').html('<span>添加文字</span>');
  
  // 取出图片的地址
  
  var $src = $('#img1').prop('src');
  
  // 设置图片的地址和alt属性
  
  $('#img1').prop({src: "test.jpg", alt: "Test Image" });
  

• jquery循环

  $(function(){
      $('.list li').each(function(i){
          $(this).html(i);
      })
  })
  
  <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
  
  
  // 第二种循环
  $.each(数组名, 回调函数)
  
  

• 事件冒泡

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

  阻止 return false;

• 事件委托

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

  $(function(){
      $list = $('#list');
      $list.delegate('li', 'click', function() {
          $(this).css({background:'red'});
      });
  })
  ...
  <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  

• jquery节点操作

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

• json数据格式

  {
      "name":"tom",
      "age":18
  }
  
  // 与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。 
  // json的另外一个数据格式是数组，和javascript中的数组字面量相同。
  
  // ["tom",18,"programmer"]
  

• ajax

  $.ajax({
      url: 'js/data.json',
      type: 'GET',
      dataType: 'json',
      data:{'aa':1}
  })
  .done(function(data) {
      alert(data.name);
  })
  .fail(function() {
      alert('服务器超时，请重试！');
  });
  
  // data.json里面的数据： {"name":"tom","age":18}
  

• jsonp
  ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了