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");//设置一个属性

$("p").css({"background-color":"yellow","font-size":"200%"});//设多个属性
 ==============================
5.清空子元素
$("#div1").empty();//所有在div1块中的内容均被移除
==============================

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 学习之基础一的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  3. Jquery学习之基础篇二

    1.Jquery添加元素的方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被 ...

  4. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  5. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  9. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

随机推荐

  1. C++成员变量的初始化顺序问题

    问题来源: 由于面试题中,考官出了一道简单的程序输出结果值的题:如下, class A { private: int n1; int n2; public: A():n2(0),n1(n2+2){} ...

  2. MySQL数据库my.cnf性能参数如何调优

    提供一个MySQL 5.6版本适合在1GB内存VPS上的my.cnf配置文件.配置文件可以到这里下载:: 下载my.cnf [client] port = 3306 socket = /tmp/mys ...

  3. nginx配置实战1----配置虚拟主机

    1 nginx虚拟主机的概念 虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点.应用组件等,提供必要的站点功能.数据存放和传输功能,所谓虚拟主机,也叫"网站空间",就是把 ...

  4. ES6新特性:利用解构赋值 (destructuring assignment), 简化代码

    本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...

  5. 浅谈我对JCS 的理解

    JCS 是Java 中缓存的一种实现,支持将数据缓存到内存和硬盘中,支持设置缓存对象的有效时长. 我认为可以这么理解JCS:客户端向服务器发出请求,服务器就先去缓存中查一下有没有客户端请求的数据,有则 ...

  6. yum命令安装mysql

    linux下使用yum安装mysql,以及启动.登录和远程访问. 1.安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没 ...

  7. 【POJ 2503】Babelfish(字符串)

    题 给定字典,再询问. 字典与询问之间有一个空行. cin.peek()是一个指针指向当前字符. #include<iostream> #include<string> #in ...

  8. IOS-App installation failed原因及解决方法

    在用真机调试的时候,每次运行app都会弹出这个框,点击ok后,再次运行就没问题了.刚开始觉得没什么,无非就是多点几次,到后来,觉得这也很浪费时间,严重影响开发效率,在网上搜索了一遍后,决定将解决方案写 ...

  9. [转]git在eclipse中的配置

    一_安装EGIT插件 http://download.eclipse.org/egit/updates/ 或者使用Eclipse Marketplace,搜索EGit 二_使用EGIT前的配置 配置个 ...

  10. Oracle数据库中调用Java类开发存储过程、函数的方法

    Oracle数据库中调用Java类开发存储过程.函数的方法 时间:2014年12月24日  浏览:5538次 oracle数据库的开发非常灵活,不仅支持最基本的SQL,而且还提供了独有的PL/SQL, ...