zoukankan      html  css  js  c++  java
  • 20150303+JQuery选择器-02

    文档处理

    插入

    删除

    复制

    替换

    包裹

    查找

    1、插入操作——内部插入

    jQuery

    <div> jQuery hello jQuery</div>

    l append(content) :将content内容插入到元素的尾部

    l appendTo(content) :将匹配到的元素插入到content元素尾部

    l prepend(content) :将content内容插入到元素的头部

    l prependTo(content) :将匹配到内容插入到content元素的头部

    demo07_nc.html

    wps9BE8.tmp

    2、插入操作——外部插入

    Linux <div> hello </div> Linux

    l after(content) :在元素的尾部插入content内容

    l before(content) :在元素的头部插入content内容

    l insertAfter(content) :将匹配到的内容插入到content元素的尾部

    l insertBefore(content) :将匹配到的内容插入到content元素的头部

    demo08_wc.html

    wps9C08.tmp

    3、删除操作

    <div>content</div>

    l empty() :清空元素内容(但不清楚元素本身)

    l remove() :清空整个元素(包括元素及内容)

    demo09_del.html

    wps9C18.tmp

    4、复制克隆)操作

    l clone() :克隆元素(但不包含事件)

    l clone(true) :克隆元素(包含元素本身绑定的事件)

    demo10_clone.html

    wps9C48.tmp

    案例05:实时购物车

    anli05.html

    wps9C59.tmp

    运行效果:

    wps9C5A.tmp

    5、替换操作

    html():实现对元素的内容替换

    replaceWith() :实现对元素本身进行替换

    demo11_replace.html

    wps9C7A.tmp

    还可以采用以下方式进行元素替换:

    wps9C7B.tmp

    在jQuery我们采用采用$来标识变量为jQuery对象,如$li

    6包裹操作

    <strong><span>文本信息</span></strong>

    l wrap() :对每个元素进行包裹

    l wrapAll() :对整个匹配元素进行统一包裹操作

    l wrapInner() :对元素的内容进行包裹

    demo12_wrap.html

    wps9C9B.tmp

    7、查找操作

    l eq(index) :通过元素的索引匹配元素,默认索引从0开始

    l filter(expr) :通过class进行元素过滤匹配元素

    l not(expr) :匹配不是指定选择器元素

    l children([expr]) :匹配所有子元素,里面可以加标识(子元素)

    l find(expr) :通过后代选择器查找元素(后代元素)

    l next([expr]) :查找下一个元素(相邻的)

    l prev([expr]) :查找上一个元素(相邻的)

    l parent([expr]) :查找当前元素的父元素

    demo13_find.html

    wps9CBC.tmp

    综合案例:表格编辑器

    wps9CCC.tmp

    anli07.html

    wps9CDD.tmp

    运行效果:

    wps9CEE.tmp

    、jQuery插件扩展

    在jQuery中,有些情况下,常用的方法或功能在jQuery中并没有进行封装,我们可以采用jQuery提供的接口实现对jQuery的扩展操作。

    基本语法:

    jQuery.fn.extend(object) :

    参数说明:

    要求参数是一个json对象

    名/值对

    要扩展的函数名称:函数的处理程序

    语法:

    jQuery.fn.extend({

    fn1:function(){},

    fn2:function(){},

    ......

    });

    由于jquery.js框架文件中存在以下代码

    wps9CFE.tmp

    我们还可以使用如下方式进行扩展:

    $.fn.extend({

    fn1:function(){},

    fn2:function(){},

    ......

    });

    demo14_extend.html

    wps9D0F.tmp

    案例7:全选、全不选、反选功能实现

    插件实现:

    wps9D2F.tmp

    绑定过程

    wps9D4F.tmp

    html代码:

    wps9D70.tmp

    运行效果:

    wps9D90.tmp

    、瀑布流布局(百度图片、花瓣网)

    Wookmark.js 瀑布流布局

  • 相关阅读:
    5. 详解创建Vue实例传入的options【暂时3个】
    编程的小知识点:
    4. Vue的 MVVM模式
    3. Vue做一个计数器 --新属性:methods、新的指令:@click
    8. Spring 注解开发(原始注解)
    2. 第一个Vue程序
    1.VUE 的安装
    【洛谷 3388】割点
    【洛谷 1063】能量项链
    三堆石子
  • 原文地址:https://www.cnblogs.com/lifushan/p/5469363.html
Copyright © 2011-2022 走看看