jQuery的一个入门

jQuery（1）

• jQuery是js的一个库，封装了js的相关方法，让我们去操作dom更加方便
• 传统的JS获取dom，可以看见获取dom比较麻烦，ES6引入了document.querySelector()相对来说比较方便
• jQuery就可以很好的避免上面获取dom特别麻烦的问题

jQuery安装和下载

• 从 jquery.com下载 jQuery 库
• 从 CDN 中载入 jQuery，下面的不一定能用，可以试试，还是建议下载
• 百度 CDN:

 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

• Google CDN:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

• 新浪 CDN:

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

• 引入不说了，大家应该都会，用script标签引入

dom对象和jQuery对象

• dom对象：通过js方式获取的元素对象
• jQuery对象：通过jQuery方法获取的元素对象，返回的是jQuery包装集
• 当js获取不存在的dom对象时，返回的是null
• 当jQuery获取不存在的dom对象时，返回的是空的jQuery包装集

• jQuery对象与dom对象相互转换

			let a = document.querySelector('div')//dom
			console.log(a)
			a = $ (a)//jquery
			console.log(a)
			a = a[0]//dom
			console.log(a)

jQuery选择器

• jQuery选择器和css选择器很像，和ES6的document.querySelector()也很相似

• 基础选择器(基本与css选择器一致)：

  • id选择器：#id
  • 元素选择器：element
  • 类选择器：.class
  • 选择所有元素：*
  • 组合选择器：a,b,c,d （可以一起选择，封装为jQuery包装集）

• 层次选择器（与css选择器相似）

  • 后代选择器 ：两个之间加空格
  • 子代选择器：>
  • 相邻选择器：+（选择第一个）
  • 同辈选择器：~
    

• 表单选择器

  • 表单选择器 ：:input,这和input可不一样，input只能选择input，:input选择所有表单框
  • 文本框选择器：:text
  • 密码框选择器：:password
  • 单选按钮选择器：:radio
  • 复选框选择器：:checkbox
  • 提交按钮选择器：:submit
  • 图像域选择器：:image
  • 重置按钮选择器：:reset
  • 按钮选择器：:button
  • 文件域选择器：:file

jQuery Dom操作

• 属性的分类：
  • 固有属性：元素本身就有的属性
  • 返回值是Boolean的属性：checked，selected，disabled，······
  • 自定义属性，用element.getAttribute(“属性名”)，当然也可以获取自带的属性
    

• jQuery获取属性

  • atter(‘属性名称’)，可获取任何属性，但在获取Boolean类型的值时，返回的是值或undefined，而不是true或者false
  • props(‘属性名称’)，不能获得自定义属性，但是获取Boolean类型的值时，返回的时布尔值
    

• 设置属性

  • attr(‘属性名’,‘属性值’)
  • props(‘属性名’,‘属性值’)
  • removeAttr(‘属性名’) 移除属性
    
    

• 操作元素

  • css(‘样式’,‘值’)操作元素样式
  • html()获取元素的html内容
  • html(‘内容’)设定元素html内容
  • text()获取文本内容
  • text(‘xxx’)设置文本内容
  • val()获取元素value值
  • val(‘xxx’)设置元素value值
    

• 添加元素值

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
  • append()和prepend()是在选中的元素里面插入内容，一个是结尾，一个是开头
  • after()和before()是插入同级元素，在自己的后面或者前面

后续，jQuery（2）