Jquery 学习之基础一
1.添加一个CSS类
$("button").click(function(){
$("#div1").addClass("important blue");
});
==============================
2.移除一个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
==============================
3.切换类
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
==============================
4.Jquery 设置CSS属性
$("p").css("background-color","yellow");//设置一个属性
6.设置元素的父类属性
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//parent() 方法返回被选元素的直接父元素
});
$("span").parents()//parents() 方法返回被选元素的所有父元素
==============================
7.返回每个div的直接子类元素
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
==============================
8.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
$("div").find("span").css({"color":"red","border":"2px solid red"});
==============================
9.next()方法返回下一个同胞元素
$("h2").next().css({"color":"red","border":"2px solid red"});
==============================
10.过滤
$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素
==============================
11.first() 方法返回被选元素的首个元素
$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素:
==============================
12.last() 方法返回被选元素的最后一个元素。
$("div p").last();
==============================
13. eq() 方法返回被选元素中带有指定索引号的元素。
$("p").eq(1);
==============================
14.not() 方法与 filter() 相反。
$("p").not(".url");//返回不是类url的P元素
==============================
15.三个操作dom的方法、DOM = Document Object Model(文档对象模型)
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
例子:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
注:id=test,这一块是文本内容<p>名称: <input type="text" id="test" value="练习easyUI"></p>
通过 jQuery val() 方法可以获得输入字段的值
$("#btn1").click(function(){
alert("值为: " + $("#test").val());//获取值
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB"); //设置值
});
==============================
16. jQuery attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));//获取id=“runoob”中链接的href属性
$("#runoob").attr("href","http://www.runoob.com/jquery");//设置href属性
});
==============================
17.text()中的参数是回调函数,参数为索引和内容
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本:雷明轩 (index: " + i + ")";
});
});
});
Jquery 学习之基础一的更多相关文章
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- Jquery学习之基础篇二
1.Jquery添加元素的方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被 ...
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
随机推荐
- C++成员变量的初始化顺序问题
问题来源: 由于面试题中,考官出了一道简单的程序输出结果值的题:如下, class A { private: int n1; int n2; public: A():n2(0),n1(n2+2){} ...
- MySQL数据库my.cnf性能参数如何调优
提供一个MySQL 5.6版本适合在1GB内存VPS上的my.cnf配置文件.配置文件可以到这里下载:: 下载my.cnf [client] port = 3306 socket = /tmp/mys ...
- nginx配置实战1----配置虚拟主机
1 nginx虚拟主机的概念 虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点.应用组件等,提供必要的站点功能.数据存放和传输功能,所谓虚拟主机,也叫"网站空间",就是把 ...
- ES6新特性:利用解构赋值 (destructuring assignment), 简化代码
本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
- 浅谈我对JCS 的理解
JCS 是Java 中缓存的一种实现,支持将数据缓存到内存和硬盘中,支持设置缓存对象的有效时长. 我认为可以这么理解JCS:客户端向服务器发出请求,服务器就先去缓存中查一下有没有客户端请求的数据,有则 ...
- yum命令安装mysql
linux下使用yum安装mysql,以及启动.登录和远程访问. 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没 ...
- 【POJ 2503】Babelfish(字符串)
题 给定字典,再询问. 字典与询问之间有一个空行. cin.peek()是一个指针指向当前字符. #include<iostream> #include<string> #in ...
- IOS-App installation failed原因及解决方法
在用真机调试的时候,每次运行app都会弹出这个框,点击ok后,再次运行就没问题了.刚开始觉得没什么,无非就是多点几次,到后来,觉得这也很浪费时间,严重影响开发效率,在网上搜索了一遍后,决定将解决方案写 ...
- [转]git在eclipse中的配置
一_安装EGIT插件 http://download.eclipse.org/egit/updates/ 或者使用Eclipse Marketplace,搜索EGit 二_使用EGIT前的配置 配置个 ...
- Oracle数据库中调用Java类开发存储过程、函数的方法
Oracle数据库中调用Java类开发存储过程.函数的方法 时间:2014年12月24日 浏览:5538次 oracle数据库的开发非常灵活,不仅支持最基本的SQL,而且还提供了独有的PL/SQL, ...