jQuery基础

jQuery

• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。
• 它的设计思想是write less,do more

jQuery的优势

• 体积小，压缩后只有100KB左右
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性
• 使用隐式迭代简化编程
• 丰富的插件支持

jQuery库文件

• jQuery分为开发版和发布版，开发版用于测试学习和开发，发布版用于发布的项目。

在页面中引入jQuery的两种方法

1. 引入本地jQuery库
   语法：<scritp src="jQuery地址" type="text/javascript"></script>
2. CDN远程引入
   百度 CDN：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   新浪 CDN: <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
   Google CDN:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

jQuery的入口

$(document).ready(function(){

})
//或简写为
$(function(){

})

• $(document).ready()与window.onload类似，但也有区别
  

jQuery基本选择器

jQuery层次选择器

jQuery属性选择器

• 属性选择器通过HTML元素的属性来选择元素
  

jQuery基本过滤选择器

jQuery可见性过滤选择器

• 通过元素显示状态来选取元素
  

• 显示所有隐藏的<p>元素：$(“p:hidden”).show();

• 隐藏所有的<p>元素：$(“p:visible”).hide();

特殊符号的转义

• 在需要转义的符号前边加 “\\”
  例如：<div id="id#a">aa</div> 获取选择器：$("#id\\#a");

选择器中的空格

1. 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果。
2. 选取class为“test”的元素内部的隐藏元素。

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

3. 选取隐藏的class为“test”的元素。

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器