• jQuery基础知识


    一、jQuery基础 
    1、jQuery是什么?
    jQuery是一个js框架,其主要思想是,通过
    选择器查找到对应的节点,然后对这个节点进行
    封装(封装成一个jQuery对象)。通过调用jQuery
    对象的属性或者方法来实现对节点的操作。这样做的
    好处是:第一,将不同的浏览器之间的差异屏蔽起来了。
    第二,代码更加简洁,维护方便。
    2、jQuery编程的步骤
    step1: 使用选择器查找节点
    step2: 调用jQuery对象的方法或者属性
    选择器:jQuery模仿css选择器语法,创建的一套
    用于查找节点的规则。
    3、jQuery对象与dom节点
    1)dom节点如何转换成jQuery对象
    调用$()函数,比如
    $(obj);
    2)jQuery对象如何转换成dom节点
    方式一:  $obj.get(0)
    方式二: $obj.get()[0]
    3) jQuery与其它js框架如何共存?
    使用conflict()函数。
    二、选择器
    1、选择器是什么?
    jQuery模仿css选择器语法,创建的一套
    用于查找节点的规则。
    2、基本选择器
    #id
    .class
    element
    selector1,select2..selectn
    *
    3、层次选择器
    select1 select2
    select1>select2
    select1+select2
    select1~select2
     
    4、过滤选择器
    (1)基本过滤选择器
    :first
    :last
    :not(selector)
    :even
    :odd
    :eq(index)
    :gt(index)
    :lt(index)
     
    (2)内容过滤选择器
    :contains(text) 匹配包含给定文本的元素
    :empty 匹配所有不包含子元素或者文本的空元素
    :has(selector) 匹配含有选择器所匹配的元素
    的元素
    :parent 匹配含有子元素或者文本的元素
     
    (3)可见性过滤选择器
    :hidden 匹配所有不可见元素,
    或者type为hidden的元素
    :visible 匹配所有的可见元素
     
    (4)属性过滤选择器
    [attribute]
    [attribute=value]
    [attribute!=value]
    (5)子元素过滤选择器
    :nth-child(index/even/odd)
    (6)表单对象属性过滤选择器
    :enabled
    :disabled
    :checked
    :selected
    5、表单选择器
    :input
    :text
    :pasword
    :radio
    :checkbox
    :submit
    :image
    :reset
    :button
    :file
    :hidden
    三、dom操作
    1、dom查找
    通过选择器找到节点后,可以调用
    a, html() : 输出或者修改节点之间的html内容
    b,text():输出或者修改节点之间文本
    c,val():输出或者修改节点的value属性
    2、创建节点:
     $(html)
    3、添加节点:
     append():向每个匹配的元素内部追加内容
     prepend():向每个匹配的元素内部前置内容
     after():在每个匹配的元素之后插入内容
     before():在每个匹配的元素之前插入内容
    4、删除节点
    remove()
    remove(selector)
    empty():清空节点
    5、复制节点
    clone()
    clone(true):使复制的节点也具有行为(将事件
    处理代码一块复制)
     
    6、属性操作
    读取:attr('');
    设置: attr('','') 或者一次
    设置多个 attr({"":"","":""});
    删除:removeAttr('')
     
    7、样式操作
    获取和设置: attr("class","")
    追加:addClass('')
    移除:removeClass('') 
    或者removeClass('s1 s2') 
    或者removeClass()//会删除所有样式
    切换样式:toggleClass,有该样式,就删除,没有,
    就添加。
    是否有某个样式 hasClass('')
    读取css('')
    设置css('','')或者
    css({'':'','':''})//设置多个样式
     
     
    1、遍历节点
    children():只考虑子元素,不考虑其它后代元素。
    next()/next(selector)
    prev()/prev(selector)
    siblings()/siblings(selector)
    find(selector)/
    parent()
     
    2、事件处理机制
    1)事件绑订的方式
    bind(type,fn)
    2)、绑订方式的简写形式
    click(function(){
    });
    3)、合成事件
    hover(enter,leave) : 模拟光标悬停事件
    toggle(fn1,fn2...):模拟鼠标连续单击事件
    4)、事件冒泡
    a、获得事件对象
    //event不再是原始的事件对象,而
    //是封装之后的对象。
    click(function(event){
    });
    b、停止冒泡
    event.stopPropagation()
    c、停止默认行为
    event.preventDefault()
    5)、事件对象的属性
    event.type
    event.target:返回事件源(是dom对象!!!)
    event.pageX/pageY: 点击的坐标
     
    6)、模拟操作
    trigger('click')
     
    3、动画
    1)、show("slow"/"normal"/"fast"/100)  hide()
    另外,还可以添加一个回调函数,比如:
    show('slow',function(){
    //这儿的代码会在动画执行完成之后
    //才执行。
    });
    2)、fadeIn() fadeOut(): 淡入、淡出
    改变不透明度。
    fadeIn,fadeOut可以添加
    "slow"/"normal"/"fast"/100参数,也可以
    添加一个回调函数。
    3)、slideUp() slideDown() : 改变元素的高度
    用法跟前面一样。
    4)、自定义动画 animate(params,speed,callback):
    params: 是一个形如  {"height":"300px","width","200px"}
    speed: 单位是毫秒,表示动画执行的速度。
    callback:回调函数,动画执行完成之后,执行
    该函数。
    4、操作类数组的方法:
    说明:jquery操作数组的方法,
    $()操作返回的如果是一个数组,可以使用如下方法来操作
    each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jquery对象。
    eq(index):返回index+1位置处的jquery对象
    index(obj):返回下标,其中obj可以是
    dom对象或者jquery对象。
    length:个数
    get():返回dom对象组成的数组
    get(index):返回index+1个dom对象。
     
  • 相关阅读:
    normalize.css 中文版
    [转载]自适应高度输入框
    【转载】H5页面列表的无线滚动加载(前端分页)
    CSS设置table下tbody滚动条与thead对齐的方法
    [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
    wordpress 目录、数据结构和解析原理
    WordPress基础知识:条件判断标签及用法大全
    主题如何添加tag标签页面
    WordPress进阶:[2]不同页面显示不同的侧边栏
    WordPress进阶:[1]怎样用tag标签做导航菜单
  • 原文地址:https://www.cnblogs.com/jiangzhaowei/p/6922690.html
Copyright © 2020-2023  润新知