WEB前端_jQuery

jQuery

梆子

• 将如下html中的li标签实现隔行换色效果

  <div>
      <ul>
          <li class="city">北京</li>
          <li class="city"><a href="">上海</a></li>
          <li class="city">天津</li>
      </ul>
  </div>
             

  

  用JavaScript实

  var objs = document.getElementsByClassName('city')
  for(var i=0;i< objs.length;i++){
      if(i%2==0){
          objs[i].style.backgroundColor = 'lightblue'
      }else{
          objs[i].style.backgroundColor = 'lightyellow'
      }
  }
             

用jQuery实现：

$('li:odd').css('background-color','lightblue')
$('li:even').css('background-color','lightyellow')
           

为什么要使用jQuery

jQuery 的两大特点

• 链式编程：比如

  .show()

  和

  .html()

  可以连写成

  .show().html()

  。
• 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

版本说明

jQuery 有三个大版本：

• • 1.x版本：最新版为 v1.11.3。
  • 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。
  • 3.x版本。

jQuery的使用

使用 jQuery 的基本步骤

下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料：

官网：http://jquery.com/
  官网API文档：http://api.jquery.com/
  汉化API文档：http://www.css88.com/jqapi-1.9/
  jquery 在线手册 ：http://hemin.cn/jq/
           

**注意：导包的代码一定要放在js代码的最上面

jQuery查找标签

• jQuery对标签的查找完全可以复用选择器规则
• 通过jQuery对象转换dom对象：jq_obj[index]

  $('li')[0]   # 所查到的对象为dom对象
             

• jQuery中支持选择器语法查找
• 标签选择器

  $('p')   # 标签选择器
  $('.para1')   # 类选择器
  $('#container')   # ID选择器
  $('*')   # 通用选择器
  $('p.para1')   # 交集选择器
  $('div,p')   # 并集选择器
             

• 层级选择器

  $('div p')   # 后代选择器：在子孙中符合条件的
  $('div>p')   # 子代选择器：在子代中符合条件的
  $('div+p')   # 毗邻选择器：紧邻的下一个
  $('div~p')   # 弟弟选择器：找某个标签下所有的X标签
             

• 筛选器
  • $(选择器:筛选器)

  # $(选择器：筛选器)
  # 根据索引筛选
  $('p:first')
  $('p:last')
  $('p:even')
  $('p:eq(index)')
  $('p:gt(index)')
  $('p:lt(index)')
  # not 筛选不包含某选择器要求的xx
  $('p:not(.para3)')
  # has 通过子代找当前
  $('li:has(a)')
  #表单筛选器，根据type进行筛选
  $('input:type类型:选中的情况')
  $('input:test:disabled')
  $('input:radio:checked')
  $('input:password')
  $('input:date')  # 此方法查找是无效的，因为input中没有date筛选器
  $('option:selected')
             

• 属性选择器

  $('[属性名]')  如： $('[href]')
  $('[属性名="属性值"]')  如： $('[href="http://www.baidu.com" target="_blank" rel="external nofollow" ]')
  $('[属性名^="属性值"]')  如： $('[href^="https"]')
  $('[属性名*="属性值"]')  如： $('[href*="baidu"]')
  $('[属性名$="属性值"]')  如： $('[href$="com"]')
  $('[属性名!="属性值"]')  如： $('[href!="http://www.baidu.com"]')