JS基础六(jQuery入门)

时间:2020-8-2 作者:admin


jQuery入门

初识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]]) 将对象调整到指定不透明度
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。