jQuery基础

Rain_xy
121 阅读2分钟

jQuery基本使用

jQuery入口函数

jQuery相当于原生js中的DOMContentLoaded

//方法一
$(function(){
    ...
    });
    
//方法二
$(document).ready(function()){
    ...
    });

jQuery选择器

jQuery基础选择器

$("选择器")，选择器直接写css选择器。

image.png

层级选择器

  • 子代选择器：$("ul>li"),使用>号，获取直接子代。
  • 后代选择器：$("ul li"),使用空格，获取ul下的所有li。

筛选选择器

image.png

image.png

隐式迭代

jQuery设置样式时会进行隐式迭代，不需要用循环，自动给匹配到的所有元素进行遍历循环，执行相应的方法。

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        $(function(){
            $('div').css('backgroundColor','blue');
        })
    </script>    
</body>

排他思想

为当前元素设置样式后，再清除兄弟元素的样式。

$(this).css('color','red');
$(this).siblings.css('color','');

链式编程

链式编程是为了减少代码量。

$(this).css('color','red').siblings().css('color','');

DOM对象和jQuery对象的区别

  • DOM对象：用原生js获取过来的对象
  • jQuery对象：用jQuery方式获取过来的对象，本质是通过$对DOM元素进行了包装
  • DOM对象使用原生js的属性和方法，jQuery对象只能使用jQuery方法。
//DOM对象
var div = document.querySelector('div');
//jQuery对象
$('div')

jQuery样式操作

  1. 通过操作css方法设置样式
  • 参数只写属性名，返回属性值。
  • 参数为属性名和属性值，属性需要加引号，值如果为数字可以不跟单位，不加引号。
  • 参数可以以对象的形式传入，设置多组样式，以对象形式传入时属性名可以不加引号，属性值若为数值可以不加单位和引号。
$(this).css("color");
$(this).css("color","red");
$(this).css({"color":"red","font-size":"10px"});
  1. 通过设置类样式方法 添加、移除、切换类。
$('div').addClass('current');
$('div').removeClass('current');
$('div').toggleClass('current');

jQuery效果

jQuery封装了很多动画效果，可以通过查阅文档使用。也可以通过animate自定义动画。

jQuery属性操作

设置或获取元素固有属性值prop()

元素固有属性：元素本身自带的属性

  • 获取属性值：prop('属性')
  • 设置属性值：prop（‘属性’，‘属性值’）

设置或获取元素自定义属性值prop()

  • 获取属性值：attr('属性')
  • 设置属性值：attr（‘属性’，‘属性值’）

数据缓存data()

利用data（）在元素上存放或读取数据,返回jQuery对象，当页面被刷新后数据丢失。

  • 存放数据：data（'name','value'）
  • 读取数据：data('name')

jQuery获取内容文本值

  1. 获取或设置普通元素的所有内容html()（相当于原生innerHTML）
  2. 获取或设置元素的文本内容不包括标签text()(相当于原生innerText)
  3. 获取或设置表单的值val()

jQuery元素操作

jQuery元素遍历

$('div').each(function(index,domEle){...}) each()会遍历匹配的每个元素，index为每个元素的索引号，domEle相当于this（domEle为DOM元素对象，使用jQuery方法前需要用$(domEle)将其转化为jQuery对象）

$.each(object,function(key,value){}) 用于数组,对象的遍历很方便。key，value分别对应object的键和值。

var a = [1,2,3];
$.each(a,function(key,value){
    console.log(key+':'+value);
})

jQuery元素的创建、添加、删除

  1. 创建元素$("<li></li>");
  2. 添加元素

内部添加：

  • 将添加元素放到元素内部最后，element.append("内容");
  • 将添加元素放到元素内部最前面，element.prepend("内容");

外部添加：

  • 将添加元素放到目标元素之后，element.after("内容");
  • 将添加元素放到目标元素前面，element.before("内容");
  1. 删除元素
  • 删除元素本身：element.remove()
  • 删除元素的所有子节点：element.empty()
  • 清空元素内容（和empty()等价）：element.html("")

jQuery元素尺寸、位置操作

尺寸操作

image.png 如果参数为空则返回相应值，返回的是数字型。如果为数字则修改相应值。

位置操作
  1. offset（）设置或获取元素相对于文档的偏移，返回一个包含left、top属性的对象。并可以通过offset（）设置元素的偏移。
  2. position（）获取元素相对于带有定位的父级元素的偏移。该方法只能获取相应值不能改变。
  3. scrollTop（）、scrollLeft（）设置或获取元素被卷去的头部或左侧。

jQuery事件

jQuery事件注册

单个事件注册

element.事件（function（）{}）

事件处理on（）绑定事件

on（）可以在元素上绑定多个事件的事件处理函数 element.on(events,[selector],fn)

  • events,一个或多个用空格分割的事件类型
  • selector，元素的子元素选择器
  • fn，回调函数

on（）可以绑定多个事件，多个事件处理程序

$('div').on({
    click:function(){},
    mouseover:function(){}
})
//如果是相同的事件处理程序
$('div').on('mouseover mouseout',function(){})

on（）可以进行事件委派，事件委派：把原来应该绑定在子元素身上的事件绑定在父元素身上，即把事件委派给父元素。

$('ul').on('click','li',function(){
    alert('hello world');
});

on（）可以给动态生成的元素绑定事件，click不能。

$('ul').on('click','li',function(){
    alert(11);
});
var li = $('<li>111</li>');
$('ul').append(li);
avatar
文章
阅读
粉丝