JQuery能够高效地操作页面元素
关于DOM和CSS的页面元素选择:
$("span"); //全部span元素
$("#elem"); //id为elem的元素
$(".classname"); //类为classname的元素
$("div#elem"); //id为elem的<div>元素
$("ul li a.menu"); //类为”menu”的<a>标签
$("p>span"); //p的直接子元素span
$("input[type=password]"); //指定类型的input元素
$("p:first"); //页面的第一个段落
$("p:even"); //全部偶数段落
$(":header"); //标题元素(h1到h6)
$(":button"); //全部按钮元素
$(":radio");
$(":checkbox");
$(":checked"); //选中状态的 选择框或段选框
- html() 获取元素或者一组元素的HTML内容,类似与JavaScript的innerHTML,会获得全部的HTML(包括文本)。
var htmlContent=$("#elem").html();
$("#elem").html("<p>Here is some new content.</p>");
/*修改内容*/
- text() 仅获取元素的文本内容,获取及修改内容如下:
1
2
3
|
var textContent=$( "#elem" ).text(); $( "#elem" ).text( "new content" ); //修改内容 $( "#elem" ).append( "<p>Here is some new content.</p>" ) //添加文本内容 |
- attr() 返回一个元素特定的属性值,当用于一组时,返回第一个元素的值。
1
2
3
|
var title=$( "#elem" ).attr( "title" ); //返回属性值 $( "#elem" ).attr( "title" , "new title" ); //修改属性值 |
- show() //显示元素 $("div").show();
- hide() // 隐藏元素 ,slow的值大约是600毫秒
$("#elem").hide("slow",function(){
//隐藏后的操作
});
元素动画
1.淡入淡出,如:
$("#elem").fadeOut("slow",funtion(){
//淡出后的操作
});
$("#elem").fadeIn(500,function(){
//淡入后的操作
});
$("#elem").fadeTo(3000,0.5,function(){
//淡入或淡出后的操作,0.5表示不透明度,表示最终不透明度淡入或者淡出为0.5
});
2.滑动,类似淡入淡出
slideDown();
slideUp();
slideToggle();
3.动画
animate()可以应用于很多的CSS样式。如把元素高度宽度改变后再淡出隐藏。
1
2
3
4
5
6
7
8
|
$( "#elem" ).animate( { width:400px; height:400px; },1500, function (){ $( this ).fadeOut( "slow" ); } ); |
命令链
jQuery命令链的长度没有什么限制,可以对同一组元素连续进行很多的操作:
$("#elem").text("Hello from jQuery").fadeOut().fadeIn();
JQuery能够高效地操作页面元素的更多相关文章
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- Selenium with Python 005 - 调用js操作页面元素
WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...
- 使用javaScript操作页面元素
from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...
- selenium常用命令--操作页面元素及获取元素内容整理
selenium常用命令之操作页面元素及获取元素内容的事件整理 例子: /**id <input type="text" id="phone" name ...
- [Selenium] 操作页面元素等待时间
WebDriver 在操作页面元素等待时间时,提供2种等待方式:一个为显式等待,一个为隐式等待,其区别在于: 1)显式等待:明确地告诉 WebDriver 按照特定的条件进行等待,条件未达到就一直等待 ...
- F12修改html进行本地js操作页面元素
F12修改html进行本地js操作页面元素
- Java&Selenium调用JS实现高亮被操作页面元素高亮
Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author daviey ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
随机推荐
- selenuim爬虫实战(日lofter.com)
LOFTER是网易公司2011年8月下旬推出的一款轻博客产品. LOFTER专注于为用户提供简约.易用.有品质.重原创的博客工具.原创社区,以及有品质的手机博客应用. LOFTER首次采用独立域名,口 ...
- Fastcgi_Finish_Request 提高页面响应速度
当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...
- C++ 类的对象管理模型初讲
//类的对象管理模型初讲 #include<iostream> using namespace std; class PointA{ private: int x;//占据4个字节大小的内 ...
- mysql存储过程,获取指定数据库的某个表的字段信息
DROP PROCEDURE IF EXISTS Proc; DELIMITER //CREATE PROCEDURE Proc(database_name varchar(50),table_nam ...
- bootstrap基础学习四篇
bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...
- 国际化信息-->MVC
假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回英文界面,而中文的操作系统则返回中文界面——这便是典型的i18n国际化问题.对 ...
- 在visual studio中运行C++心得
1.在visual studio中建立C++项目 (1)新建->项目->空项目 C++ (2)右击项目->添加->新建项->C++文件(.app) (3编写C++文件 ...
- Json与数组
今天趁着看源代码的同时,记录学习的小知识. 一.String.Split 方法有6个重载函数: 1) public string[] Split(params char[] separator)2) ...
- 匿名(无账号密码)从ftp服务器下载文件
public static String downFile(String ip,String ftpFileName,String savePath,String fileName) { FTPCli ...
- UIWindow和UIScreen
UIWindow和UIScreen 目录 概述 职责 实用操作 概述 UIWindow职责 包含了应用程序的可视化的内容 为视图和其他应用程序对象在触摸事件中提供了关键性的作用 与视图控制器一起协作来 ...