百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

jquery筛选、样式、事件、效果(jquery筛选器)

toyiye 2024-09-09 08:57 3 浏览 0 评论

1 文档处理

jQuery中对dom元素进行操作。

属性/方法

描述

append(content|fn)

向每个匹配的元素内部追加内容。$("p").append("<b>Hello</b>");向所有段落中追加一些HTML标记。


appendTo(content)

把所有匹配的元素追加到另一个指定的元素中。使用这个方法是颠倒了常规的$(A).appendTo(B)的操作,即不是把B追加到A中,而是把A追加到B中。

$("p").appendTo("div");把所有段落追加到div元素中


prepend(content|fn)

向每个匹配的元素内部前置内容。$("p").prepend("<b>Hello</b>");向所有段落中前置一些HTML标记代码。


prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值为foo的元素中。


after(content|fn)

在每个匹配的元素之后插入内容。$("p").after("<b>Hello</b>");在所有段落之后插入一些HTML标记代码。


before(content|fn)

在每个匹配的元素之前插入内容。$("p").before("<b>Hello</b>");在所有段落之前插入一些HTML标记代码。


insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一个元素之后。与 $("#foo").after("p")相同


insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。


wrap(html|ele|fn)


把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class='wrap'></div>"); 把所有的段落用一个新创建的div包裹起来


unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

$("p").unwrap(); 把所有段落的父元素直接移除


wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来。$("p").wrapAll("<div></div>");用一个生成的div将所有段落包裹起来


wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。$("p").wrapInner("<b></b>");把所有段落内的每个子内容加粗


replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<b>Paragraph. </b>");把所有的段落标记替换成加粗的标记。


replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>Paragraph. </b>").replaceAll("p");把所有的段落标记替换成加粗标记


empty()

删除、清空匹配的元素集合中所有的子节点。$("p").empty();把所有段落的子元素(包括文本节点)删除


remove([expr])

从DOM中删除所有匹配的元素。$("p").remove();从DOM中把所有段落删除


clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。(传入参数布尔值(true 或者 false)指示事件处理函数是否会被复制。)

$("b").clone().prependTo("p");克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。



2 筛选

jQuery中对dom元素进行筛选判断。

属性/方法

描述

first()

first() 获取第一个元素。

$('li').first()


last()

last() 获取最后个元素。

$('li').last()


is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合,或者表达式无效,都返回false。

$("input[type='checkbox']").parent().is("form");由于input元素的父元素是一个表单元素,所以返回true。


has(expr|ele)

保留包含特定后代的元素,去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。

$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色


find(e|o|e)

搜索所有与指定表达式匹配的元素。

$("p").find("span");从所有的段落开始,进一步搜索下面的span元素。


parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。


siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

$("div").siblings();找到每个div的所有同辈元素。


3 样式

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

addClass(class|fn)

为每个匹配的元素添加指定的类名 $("p").addClass("selected"); 为匹配的元素加上 'selected' 类


removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类 $("p").removeClass("selected"); 从匹配的元素中删除 'selected' 类


toggleClass(class|fn[,sw])

如果存在(不存在)就删除(添加)一个类。$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类


hasClass(class)

检查元素是否含有某个特定的类,如果有,则返回true。

$("div").hasClass("protected")


css(name|pro|[,val|fn])

访问匹配元素的样式属性 $("p").css("color") 取得第一个段落的color样式属性的值。$("p").css("color","red"); 将所有段落字体设为红色


height/width([val|fn])

取得匹配元素当前计算的高/宽度值(px)

$("p").height();$("p").width();


offset([coordinates])

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );


4 事件

jQuery中dom元素事件的操作。

属性/方法

描述

on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数

$("p").on("click", function(){

alert( $(this).text() );

});


off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

$("p").off( "click", "**" )


bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

$(document).bind('mousemove',function(e){

$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);

});


unbind(t,[d|f])

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。

$("p").unbind( "click" )


one(type,[data],fn)

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

$("p").one("click", function(){

alert( $(this).text() );

});


hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

$("td").hover(

function () {

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

事件冒泡:事件在dom文档中,会逐层往上触发。如点击了div里面的一个p元素,那么div及其上层元素的click也会被触发。如要阻止事件的冒泡可以在里层的元素的事件方法中return false。


5 效果

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

show([s,[e],[fn]])

显示隐藏的匹配元素。

$("p").show() 显示所有段落


hide([s,[e],[fn]])

隐藏显示的元素。

$("p").hide() 隐藏所有段落


slideDown([s],[e],[fn])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

$("p").slideDown("slow"); 用600毫秒缓慢的将段落滑下


slideUp([s,[e],[fn]])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

$("p").slideUp("slow");用600毫秒缓慢的将段落滑上


slideToggle([s],[e],[fn])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("slow");用600毫秒缓慢的将段落滑上或滑下


fadeIn([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。$("p").fadeIn("slow");用600毫秒缓慢的将段落淡入


fadeOut([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

$("p").fadeOut("slow");用600毫秒缓慢的将段落淡出


fadeTo([[s],o,[e],[fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度


fadeToggle([s,[e],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

$("p").fadeToggle("slow");用600毫秒缓慢的将段落淡入/出


animate(p,[s],[e],[fn])1.8*

用于创建自定义动画的函数。

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码