AI智能
改变未来

JS基础六(jQuery入门)

jQuery入门

  • 初识jQuery
  • 1.jQuery简介
  • 2.jQuery特点
  • 3.jQuery工作原理
  • 引入jQuery
  • jQuery基本规则
    • 1.jQuery 选择器
  • JQuery操作DOM
    • 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]]) 将对象调整到指定不透明度
    赞(0) 打赏
    未经允许不得转载:爱站程序员基地 » JS基础六(jQuery入门)