jquery基本语法

jQuery

• jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。
  jQuery是一个兼容多浏览器的JavaScript框架，核心理念是weite less ,do more(写的更少，做的更多)。jQuery已经成为最流行的JavaScript框架。
  jQuery是免费、开源的。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
• jQuery能做什么
  1、访问和操作DOM元素
  2、控制页面样式
  3、对页面事件进行处理
  4、扩展新的jQuery插件
  5、与ajax技术完美结合
  注意：jQuery能做的JavaScript都能做，但使用jQuery能大幅度提高开发效率
• jQuery特点
  1、轻量级
  2、强大的选择器
  3、出色的DOM封装
  4、可靠地事件处理机制
  5、完善的Ajax
  6、出色的浏览器兼容性
  7、丰富的插件支持
  8、完善的API文档
• jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
  1. 优质的选择器和筛选器
  2. 好用的隐式迭代
  3. 强大的链式编程
• 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
• 接下来我们就来认识一下 jQuery

jQuery 的使用

• jQuery官网
  • 官网是全英文的
  • 也没啥可看的，不过没事的时候可以看看了解一下
• jQuery方法大全中文网
  • 这个网站可以多看看
  • 里面是 jQuery 的方法大全，而且是中文的
• 我们要使用 jQuery 首先要下载一个
  • 可以去官网下载，也可以直接百度搜索下载，都可以
• 然后就是再页面里面引入 jQuery.js 就行了
  
  
  
  
  
  
  
  
  
  
  
  
• 然后就可以开始使用了
• jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行

jQuery.ready()与window.onload的区别

  	window.onload                        	$(document).ready()                     

执行时机 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 无 $(function(){ //执行代码}) ;

jQuery语法结构

$(selector).action();

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

语法 说 明
css(“属性”,“属性值”) 为元素设置CSS样式的值
addClass() 为元素添加类样式
next() 获得元素其后紧邻的同辈元素
prev() 获得元素前一个紧邻的同辈元素

jQuery对象和DOM对象

• DOM对象：直接使用JavaScript获取的节点对象
• jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是独立的，它只能访问它特有的方法，不能使用DOM对象中的任何方法。
• jQuery对象和DOM对象转换:
  • jQuery转换成DOM对象
    通过index下标转换
    var $txtname=$("#txtName") //jQuery对象
    var txtName = $txtName[0] //DOM对象
    通过get（index）方法转换
    var $txtname=$("#txtName") //jQuery对象
    var txtName = $txtName.get(0) //DOM对象
  • DOM对象转换成jQuery对象
    var txtName=document.getElementById(‘txtName’); //DOM对象
    var $txtName= $(txtName);//jQuery对象总结：jQuery对象是一个数组对象，可以通过[index]或get(index)得到DOM对象。平时用到的jQuery对象都是通过$()函数制造出来的，所以我们可以认为$()函数就是一个jQuery对象的制造工厂。

选择器和筛选器

• 选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

• 什么是jQuery选择器
  jQuery选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这些选择器。
  jQuery选择器的优势
  1、简洁的写法
  2、支持css1到css3
  3、完善的处理机制
  提示：jQuery选择器是学习jQuery的基础。可见，jQuery选择器的重要性。当然想一下掌握所有选择器也是很困难的，这个得靠实践和积累。
  // 按照 id 获取页面中的元素
  const ele = jQuery(’#box’)
  const ele = $(’#box’)
  • 上面两个都可以按照 id 来获取元素
    // 按照类名来选择
    const eles = jQuery(’.a’)
    const eles = $(’.a’)
  • 上面就是按照类名来选择元素，可以获取到一组元素
    const lis = jQuery(‘li’)
    const lis = $(‘li’)
  • 上面就是按照标签名来获取元素，可以获取到一组元素
    const eles = jQuery(‘ul > li’)
    const eles = $(‘ul > li’)
  • 上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

• 直接找到第一个
  $(‘li:first’) // 找到所有 li 中的第一个
• 直接找到最后一个
  $(‘li:last’) // 找到所有 li 中的最后一个
• 直接找到第几个
  $(‘li:eq(3)’) // 找到所有 li 中索引为 3 的那个
• 找到所有奇数个
  $(‘li:odd’) // 找到所有 li 中索引为 奇数 的
• 找到所有偶数
  $(‘li:even’) // 找到所有 li 中索引为 偶数 的

筛选器

• jQuery 的筛选器就是在选择器选择到一组元素以后
• 对元素进行筛选，也可以对准确的某一个元素进行判断和获取

  1. 找到所有元素中的第一个
     $(‘li’).first()

  2. 找到所有元素中的最后一个
     $(‘li’).last()

  3. 找到某一个元素的下一个兄弟元素
     $(‘li:eq(3)’).next()

  4. 找到某一个元素的上一个兄弟元素
     $(‘li:eq(3)’).prev()

  5. 找到某一个元素的后面的所有兄弟元素
     $(‘li:eq(3)’).nextAll()

  6. 找到某一个元素的前面的所有兄弟元素
     $(‘li:eq(3)’).prevAll()

  7. 找到某一个元素的父元素
     $(‘li:eq(3)’).parent()

  8. 找到某一个元素的所有结构父级，一直到 html
     $(‘li:eq(3)’).parents()

  9. 找到一组元素中的某一个
     // 在 li 的所有父级里面找到所有 body 标签
     $(‘li’).parents().find(‘body’)

     // 找到 div 标签下所有后代元素中所有类名为 box 的元素
     $('div').find('.box')
     

属性操作

• 给一个元素添加某个属性
  // 给 div 元素添加一个 id 属性，值是 box
  ${(}^{\prime }di{v}^{\prime }).prop{(}^{\prime }i{d}^{\prime }{,}^{\prime }bo{x}^{\prime })//获取div的id属性console.log($(‘div’).prop(‘id’))

  • prop 这个方法只能添加元素自己本身就有的属性
  • 如果是添加的自定义属性，不会显示在标签上，但是可以使用

• 给一个元素添加某个自定义属性
  // 给 div 添加一个 index 属性，值是 1
  ${(}^{\prime }di{v}^{\prime }).attr{(}^{\prime }inde{x}^{\prime },1)//获取div的index属性console.log($(‘div’).attr(‘index’))

• 移除元素的某一个属性
  // 移除元素自己本身的属性
  $(‘div’).removeProp(‘id’)
  // 移除元素的自定义属性
  $(‘div’).removeAttr(‘index’)

• 操作元素的类名
  // 判断某一个元素有没有某一个 class
  $(‘div’).hasClass(‘box’) // true 表示该元素有 box 类名，false 表示该元素没有 box 类名

  // 给元素添加一个类名
  $('div').addClass('box2') // 给 div 元素添加一个 box2 类名
  
  // 移除元素的类名
  $('div').removeClass('box') // 移除 div 的 box 类名
  
  // 切换元素类名
  $('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加
  

• 隐式迭代

  • 默认自动执行挨个遍历的操作
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

• 操作元素的内容
  // 给元素的 innerHTML 赋值
  $(‘div’).html(‘hello world’)
  // 获取元素的 innerHTML
  $(‘div’).html()

  // 给元素的 innerText 赋值
  $('div').text('hello world')
  // 获取元素的 innerText
  $('div').text()
  
  // 给元素的 value 赋值
  $('input').val('admin')
  // 获取元素的 value 值
  $('input').val()
  

操作样式

• jQuery 操作元素的样式就是一个方法 css
  // 给元素设置一个 css 样式
  $(‘div’).css(‘width’, ‘100px’)

  // 获取元素的某一个样式
  $('div').css('width')
  
  // 给元素设置一组样式
  $('div').css({
      width: '100px',
      height: '200px'
  })