JS基础六（jQuery入门）

jQuery入门

• 初识jQuery
• 1.jQuery简介
• 2.jQuery特点
• 3.jQuery工作原理

• 1.jQuery 选择器

• 1.属性操作
• 2.内容操作
• 3.样式操作
• 4.获取元素
• 5.移动元素
• 6.创建新元素 复制和删除
• 7.事件操作
• 8.常见的取值和赋值函数

初识jQuery

1.jQuery简介

jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便地处理HTML、事件，实现动画效果，并且为网站提供方便的Ajax交互。

2.jQuery特点

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

3.jQuery工作原理

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

引入jQuery

1. 1.先引入jquery 用的是js的引入方式

<script src=\"jquery路径\"></script>

1. 在学习中可以使用开发版，代码未进行压缩，是可读的
2. 生产版，是压缩后的，用于生产环境的版本，去掉了所有的不影响使用的代码、空格、换行等，保证了jQuery文件的最小。

jQuery基本规则

1. jquery会提供一个 对象 叫 $，它有个别名叫　jquery
2. Jquery 使用$去获得我们需要用到的元素 $(‘选择器’) 把得到的元素称之为jq对象；
3. Jq提供的所有的方法只能由jq对象调用 jq对象.jq方法();

1.jQuery 选择器

基本选择器

1. 标签选择器（元素选择器）
   语法： $(“html标签名”) 获得所标签名称的元素
2. id选择器
   语法： $(\”#id的属性值\”) 获得id属性值匹配的元素
3. 类选择器
   语法： $(\”.class的属性值\”) 指定的class属性值匹配的元素
4. 并集选择器：
   语法： $(\”选择器1,选择器2…\”取多个选择器选中的元素之和
5. 全部选择器
   语法： $(\”*\”) 获取此页面中的所有元素

层级选择器

1. 后代选择器
   语法： $(\”A B \”) 选择A元素 所有B元素
2. 子选择器
   语法： $(“A > B”) 选择A元素 所有直接子元素B
3. 亲弟弟选择器
   语法： $(\”A + B \”) 选择紧接在 之后同级B元素
4. 弟弟选择器
   语法： $(“A ~ B”) 选择A元素 所有同级B元素
   属性选择器
5. 属性名称选择器
   语法： $(“A[属性名]”) 包含指 的选择器
6. 属性选择器
   语法： $(“A[属性名=‘值’]”) 定属性等于指定值的选择器
   可选关系运算符：
   != :属性值不等于该值
   ^= :属性值以该值开头
   $= :属性值以该值结尾
   *= :属性值中包含该值
7. 复合属性选择器
   语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器,必须都符合

JQuery操作DOM

1.属性操作

1. 使用attr()
   获取: 对象.attr(“属性名”) //返回当前值，底层使用的是getAttribute
   注意：此种方式不能获取value属性的数据，使用对象名.val()进行获取
   修改：对象.attr(“属性名”,“属性值”);
   删除：removeAttr(“属性名”) ：删除该属值
2. 使用prop()
   使用方法同attr()一致，底层是property
3. attr和prop区别
   如果操作的是元素的固有属性，则建议使prop，某些特定属性attr获取不到
   如果操作的是元素自定义的属性，则建议使attr

2.内容操作

获取：
1. html(): 获取元素内的标签体内容 ，调用的innerHTML
2. text(): 获取元素的标签体纯文本内容底层调用的innerText
3. val()： 获取元素的value属性值
修改：
1. html(“新的内容”): 新的内容会将原容覆盖，HTML标签会被解析执行
2. text(“新的内容”): 新的内容会将原容覆盖，HTML标签不会被解析执行
3. val(“新的内容”)： 设置元素的value值

3.样式操作

1、使用css()
对象.css(“属性名”) //返回当前属性的式值
对象.css(“属性名”,“属性值”) //增加、修元素的样式
对象.css({“样式名”:“样式值”,“样式名”:“式值”……})//使用json传参，提升代码书写率。
2、使用addClass()
对象.addClass(“类选择器名”) //追加个类样式
对象.removeClass(“类选择器名”) //删一个指定的类样式
对象.toggleClass(“类选择器名”): //切class属性
toggleClass(“one”):
判断如果元素对象上存在class=“one”，则将属性值one删除掉。 如果元素对象上不存在class=“one”，则添加

4.获取元素

jQuery的基本设计思想和主要用法，就是\”选择某个网页元素，然后对其进行某种操作\”。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
选择表达式可以是CSS选择器：

$(document) //选择整个文档对象$(\'#myId\') //选择ID为myId的网页元素$(\'div.myClass\') // 选择class为myClass的div元素$(\'input[name=first]\') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

$(\'a:first\') //选择网页中第一个a元素$(\'tr:odd\') //选择表格的奇数行$(\'#myForm :input\') // 选择表单中的input元素$(\'div:visible\') //选择可见的div元素$(\'div:gt(2)\') // 选择所有的div元素，除了前三个$(\'div:animated\') // 选择当前处于动画状态的div元素

5.移动元素

jQuery提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

1. 使用.insertAfter()，把div元素移动p元素后面：

$(\'div\').insertAfter($(\'p\'));

1. 使用.after()，把p元素加到div元素前面：

$(\'p\').after($(\'div\'));

6.创建新元素 复制和删除

创建新元素，直接将新元素放入jQuery的构造函数里就好

$(\'<p>Hello</p>\');$(\'<li class=\"new\">new list item</li>\');$( \"<p>Test</p>\" ).appendTo( \".inner\" ); //把<p>Test</p>放入class=inner的元素内

复制和删除

$(\'p\').remove();  //删除元素，且不保留$(\'p\').empty(); //  清空元素的内容，但是保留

7.事件操作

$(\'p\').click(function(){   //把事件直接绑定在网页元素之上。alert(\'Hello\');});.blur() //表单元素失去焦点。.change() //表单元素的值发生变化.click() //鼠标单击.dblclick() //鼠标双击.focus() //表单元素获得焦点.focusin() //子元素获得焦点.focusout() //子元素失去焦点.hover() //同时为mouseenter和mouseleave事件指定处理函数.keydown() //按下键盘（长时间按键，只返回一个事件）.keypress() //按下键盘（长时间按键，将返回多个事件）.keyup() //松开键盘.load() //元素加载完毕.mousedown() //按下鼠标.mouseenter() //鼠标进入（进入子元素不触发）.mouseleave() //鼠标离开（离开子元素不触发）.mousemove() //鼠标在元素内部移动.mouseout() //鼠标离开（离开子元素也触发）.mouseover() //鼠标进入（进入子元素也触发）.mouseup() //松开鼠标.ready() //DOM加载完成.resize() //浏览器窗口的大小发生改变.scroll() //滚动条的位置发生变化.select() //用户选中文本框中的内容.submit() //用户递交表单.toggle() //根据鼠标点击的次数，依次运行多个函数.unload() //用户离开页面

8.常见的取值和赋值函数

.html() //取出或设置html内容.text() //取出或设置text内容.attr() //取出或设置某个属性的值.width() //取出或设置某个元素的宽度.height() //取出或设置某个元素的高度.val() //取出某个表单元素的值

动画效果

1.默认显示和隐藏元素

1. show([speed,[easing],[fn]])
   speed：动画的速度。三个预定义的值(“slow\”normal”, “fast”)或表示动画时长的毫秒(如：1000，600, 200)，默认为0
   easing：用来指定切换效果，默认是\”swing可用参数\”linear\”
   swing：动画执行时效果是 先慢，中间快，最后又慢
   linear：动画执行时速度是匀速的
   fn：在动画完成时执行的函数，每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])

2.滑动显示和隐藏方式

slideUp([speed,[easing],[fn]])slideDown([speed],[easing],[fn])slideToggle([speed],[easing],[fn])

3.淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])fadeOut([speed],[easing],[fn])fadeToggle([speed,[easing],[fn]])fadeTo([speed,opacity,easing],[fn]]) 将对象调整到指定不透明度