jQuery入门

jQuery入门

1.jquery基本概念

• 什么是jquery

  // 1.jQuery是对原生JavaScript二次封装的工具和函数
  
  // 2.jQuery是一个间接高效且功能丰富的JavaScript工具库
  

• jQuery安装

  // 版本
  
  // 开发(development)版本: jQuery-3.3.1.js
  
  // 生产(production)版本: jQuery-3.3.1.min.js
  

2.jQuery基本使用

• 选择器

  var $box = $('.box')	
  
  // 1.()中为css语法
  
  // 2.得到的$box为存放js对象的数组，即jq对象。 eg: [js1,js2,js3]
  
  // 注意: 一定要是同一结构下的，所以()应该注意层级关系，不然index()会出错
  

• js对象和jq对象转换

  js对象: box	
  
  jq对象: $box
  
  // js --> jq: $(box)
  
  // jq --> js: $box[index] | $box.get(index)
  

• 文本操作

  // 获取原有文本
  
  $box.text() | $box.html()
  
  // 设置新文本
  
  $box.text('newvalue') | $box.html('<b>newdata</b>')
  

• 事件绑定

  // $box为jq对象
  
  $box.click(function(ev){
      code
  })
  
  // 1. js对象如果包含多个页面元素对象,可以一次性对全部对象绑定该事件
  
  // 2. ev事件为jq事件,但是兼容js事件(可以直接调用js的属性和方法)
  
  // 3. this对象为js对象,$(this)就转化为jq对象
  
  // 4. 内部可以通过$(this).index()来获取自身在当前结构下的索引
  

• 类名操作

  $box.addClass('newClass')	// 增添一个新类名
  
  $box.removeClass('oldClass') // 删除一个已经的类名
  
  // 多类名时,jq操作类名讲每个类名最为单一考虑对象，不会影响其他类名
  

• 样式操作

  $box.css('background-color')	// 获取背景颜色
  
  $box.css('background-color','red')		// 设置背景颜色为红色
  
  $box.css('background-color',function(){
      return 'yellow'
  })		// 通过函数返回值来设置背景颜色
  

• 文档结构关系

  // 父
  $sup.parent()
  // 父,父的父...
  $sup.parents()
  // 子们
  $sup.children() *****
  // 上兄弟
  $sup.prev()  ***
  // 上兄弟们
  $sup.prevAll()
  // 下兄弟
  $sup.next()  ***
  // 下兄弟们
  $sup.nextAll()
  // 同级别的兄弟们
  $sup.siblings()  ***
  
  // 在sup下查找类名为inner的子级
  $sup.children('.inner')
  
  // 获得的结果都是jq对象, 还可以接着使用jq方法