jQuery学习

概述

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

基础语法

$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作
  • action对应 jQuery 提供的各种操作函数API

核心语法

  1. jQuery([selector,[context]])
    接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。

  2. jQuery(html,[ownerDocument])
    根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

  3. jQuery(callback):$(document).ready()的简写。

  • $(function(){ // 文档就绪 }); 文档就绪函数 ready
  • 为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
  • 如果在文档没有完全加载之前就运行函数,操作可能失败
  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小
  1. jQuery 对象访问
  • each(callback)
  • size()
  • length
  • selector
  • context
  • get([index])
  • index([selector|element])
  1. 数据缓存
  • data([key],[value])
  • removeData([name|list])1.7*

jQuery的多种选择器

  1. 基本选择器:#id; element; .class; *; selector1, selector2....

  2. 层级选择器:ancestor descendant; parent>child; prev+next; prev~siblings

  3. 基本筛选器: :first :not(selector) :even :odd :eq(index) :gt(index) :lang1.9+ :last :lt(index) :header :animated :focus :root1.9+ :target1.9+

  4. 内容选择器: :contains(text) :empty :has(selector) :parent

  5. 可见性 :hidden :visible

  6. 属性选择器:[attribute] ;[attribute=value]; [attribute!=value]; [attribute^=value]; [attribute$=value];[attribute*=value]; [attrSel1[attrSelN]

  7. 子元素选择器 :first-child :first-of-type1.9+ :last-child :last-of-type1.9+ :nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+ :nth-of-type()1.9+ :only-child :only-of-type1.9+

  8. 表单 :input :text :password :radio :checkbox :submit :image :reset :button :file

  9. 表单对象属性 :enabled :disabled :checked :selected

  10. 混淆选择器 $.escapeSelector(selector)3.0+

//基本选择器
​
$(
    function(){
        console.log($('.box')); //选择类
        console.log($('#name')); // 选择ID
        console.log($('div'));  // 选择标签
        console.log($('h2, p'));  // 选择多个
    }()
)
​
// 层级选择器
​
$(
    function(){
        console.log($('.midd .test')); // 层级
        console.log($('.midd>p')); // 父子
        console.log($('.box+ #name'));  // 同级下一个 只能连续
        console.log($('.box~.test'));  // 兄弟节点
    }()
)
​
// 基本筛选
​
$(function () {
    console.log($('li:first'));
    console.log($('input:not(:checked)'));
    console.log($('tr:even')); // 选中1,3,5 索引是0,2,4...
    console.log($('tr:odd')); // 选中2,4,6...
    console.log($('tr:eq(1)'));
}())
​
// 内容选择器
​
$(function(){
    console.log($('div:contains("John")')); // 包含
    console.log($('td:empty'));
}()
)
​
// 属性选择器
​
$(
    function (){
        console.log($('input[name^=app]')); // = != ^= $= *= 包含某个部分
    }()
)
​
// 子元素选择器
​
$(
    function (){
        console.log($('ul li:first-child'));
        console.log($('h2:nth-of-type(2)')); // 同一级别 同一元素第几个
        console.log($('.test:nth-child(6)'))  // 找同一级别第几个元素 2n 取倍数
    }()
)
​
// 表单选择器
​
$(
    function(){
        console.log($(':input'));
    }()
)
​
// 混淆选择器
$(
    function(){
        console.log($('.'+$.escapeSelector('.test')));
    }()
)

jQuery操作DOM

事件

  1. 事件处理
  • on(eve,[sel],[data],fn)1.7+
  • off(eve,[sel],[fn])1.7+
  • one(type,[data],fn)
  • trigger(type,[data])
  • triggerHandler(type, [data])
  1. 事件切换
  • hover([over,]out)
  • toggle([spe],[eas],[fn])1
  1. 事件
  • blur([[data],fn])
  • change([[data],fn])
  • click([[data],fn])
  • dblclick([[data],fn])
  • error([[data],fn])
  • focus([[data],fn])
  • focusin([data],fn)
  • focusout([data],fn)
  • keydown([[data],fn])
  • keypress([[data],fn])
  • keyup([[data],fn])
  • mousedown([[data],fn])
  • mouseenter([[data],fn])
  • mouseleave([[data],fn])
  • mousemove([[data],fn])
  • mouseout([[data],fn])
  • mouseover([[data],fn])
  • mouseup([[data],fn])
  • resize([[data],fn])
  • scroll([[data],fn])
  • select([[data],fn])
  • submit([[data],fn])
  • unload([[data],fn])

文档处理

  1. 内部插入
  • append(content|fn)
  • appendTo(content)
  • prepend(content|fn)
  • prependTo(content)
  1. 外部插入
  • after(content|fn)
  • before(content|fn)
  • insertAfter(content)
  • insertBefore(content)
  1. 包裹
  • wrap(html|ele|fn)
  • unwrap()
  • wrapAll(html|ele)
  • wrapInner(html|ele|fn)
  1. 替换
  • replaceWith(content|fn)
  • replaceAll(selector)
  1. 删除
  • empty()
  • remove([expr])
  • detach([expr])
  1. 复制
  • clone([Even[,deepEven]])

属性和样式

  1. 属性
  • attr(name|pro|key,val|fn)
  • removeAttr(name) prop(n|p|k,v|f)
  • removeProp(name)
  1. CSS 类
  • addClass(class|fn)
  • removeClass([class|fn])
  • toggleClass(class|fn[,sw])
  1. HTML代码/文本/值
  • html([val|fn]) text([val|fn])
  • val([val|fn|arr])
  1. CSS
  • css(name|pro|[,val|fn])1.9*
  1. 位置
  • offset([coordinates])
  • position()
  • scrollTop([val])
  • scrollLeft([val])
  1. 尺寸
  • height([val|fn])
  • width([val|fn])
  • innerHeight()
  • innerWidth()
  • outerHeight([soptions])
  • outerWidth([options])

效果

  1. 基本
  • show([s,[e],[fn]])
  • hide([s,[e],[fn]])
  • toggle([s],[e],[fn])
  1. 滑动
  • slideDown([s],[e],[fn])
  • slideUp([s,[e],[fn]])
  • slideToggle([s],[e],[fn])
  1. 淡入淡出
  • fadeIn([s],[e],[fn])
  • fadeOut([s],[e],[fn])
  • fadeTo([[s],o,[e],[fn]])
  • fadeToggle([s,[e],[fn]])
  1. 自定义
  • animate(p,[s],[e],[fn])1.8*
  • stop(,[j])1.7*
  • delay(d,[q])
  • finish([queue])1.9+

筛选函数

  1. 过滤
  • eq(index|-index)
  • first() last()
  • hasClass(class)
  • filter(expr|obj|ele|fn)
  • is(expr|obj|ele|fn)
  • map(callback)
  • has(expr|ele)
  • not(expr|ele|fn)
  • slice(start,[end])
  1. 查找
  • children([expr])
  • closest(e|o|e)1.7*
  • find(e|o|e)
  • next([expr])
  • nextAll([expr])
  • nextUntil(e|e)
  • offsetParent()
  • parent([expr])
  • parents([expr])
  • parentsUntil(e|e)
  • prev([expr])
  • prevall([expr])
  • prevUntil(e|e)
  • siblings([expr])
  1. 串联
  • add(e|e|h|o[,c])1.9*
  • andSelf()1.8-
  • addBack()1.9+
  • contents()
  • end()
$(
    $('.box').on('click', function(){
        $('p').toggleClass('red')  // 添加样式
    }),
​
    $('.switch').on('click', function(){
        $('p').slideToggle();  // 下滑出现
    }),
​
    $('#move').on('click', function(){
        $('ul li').appendTo('.show')  // 添加文本
    }),
​
    $('ul li:even').hover(function(){  // 鼠标悬浮效果
        $(this).css('background','yellow')
    }, function(){
        $(this).css('background','')
    }),
​
    $('ul li:odd').on('mouseover', function(){
        $(this).css('background', 'blue')
        console.log($(this).text('modify...'));
    }).on('mouseout', function(){
        $(this).css('background', '')
    }),
​
    $('#modify').on('click', function(){  //修改文本
        let text = $(this).val()
        $('li').each(function(i){
            $(this).text(text+(i+1))
        })
    }),
​
    $('#username').on('click', function(){
        let username = $('input[name="username"]').val()
        console.log(username);
        $('.username').text(username)
​
    }), 
​
    $('input[placeholder]').focus(function(){  // 鼠标聚焦
        $(this).removeClass('red-bor')
    }).blur(function(){
        // $(this).addClass('done')
        if($(this).val()==''){
            $(this).addClass('red-bor')
        }else{
            $(this).addClass('done')
        }
    })
)

具体操作学习于:

http://jquery.cuishifeng.cn/
posted @ 2020-04-09 17:10  riyir  阅读(519)  评论(0编辑  收藏  举报