<html>

 <head>

 <meta charset="utf-8">

 <title>jQuery的练习</title>

 <script src="jquery.js"></script>

 <script language="javascript">

     $("document").ready(function(){

         $("#p1").click(function(){

             alert($("#p3").text());

         });

         $("#p2").click(function(){

             alert($("#p3").html());

         });

         $("#b1").click(function(){

             alert($("#b2").val());

         });

         $("#a1").click(function(){

             alert($("#a2").attr("href"));

         });

         $(".b1").click(function(){

             $(".p1").text("欢迎加入柠檬");

         });

         $(".b2").click(function(){

             $(".p2").html("也欢迎你加入柠檬");

         });

         $(".b3").click(function(){

             $(".p3").val("柠檬棒棒哒");

         });

         $(".s1").click(function(){

             $(".s2").append("<b>棒棒哒;</b>");

         });

         $(".f1").click(function(){

             $(".f2").prepend("<b>柠檬人;</b>");

         });

         $("#q1").click(function(){

             $("img").before("<i>美女;</i>");

         });

         $("#q2").click(function(){

             $("img").after("<i>帅哥;</i>");

         });

         $("#g1").click(function(){

             $("#g2").remove();

         });

         $("#k1").click(function(){

             $("#k2").empty();

         });

         $("#c1").click(function(){

             $("h2,i").addClass("col");

         });

         $("#c2").click(function(){

             $("h2").removeClass("col");

         });

         $("#c3").click(function(){

             $("h4").toggleClass("col");

         });

         $("#d1").click(function(){

             //$("p").css("background-color","purple");

             $("p").css({"background-color":"purple","font-size":"26px"});

         });

     });

 </script>

 <style type="text/css">

     .col{

         color:red;

         font-size:28px;

     }

 </style>

 </head>

 <body>

     <h3>1:text() - 设置或返回所选元素的文本内容;

     html() - 设置或返回所选元素的内容（包括 HTML 标记）

     </h3>

     <div>

         <p id="p3">这是段落中的<b>粗体</b>文本</p>

         <button id="p1">显示文本</button>

         <button id="p2">显示HTML</button>

     </div>

     <br/><hr>

     <h3>2:val() - 设置或返回表单字段的值</h3>

     <div>

         名称：<input type="text" id="b2" value="柠檬学院"/>

         <button id="b1">显示值</button>

     </div>

     <h3>3:获取属性 - attr();jQuery attr() 方法用于获取属性值。</h3>

     <div>

     <a id="a2" href="http://www.bjlemon.com">柠檬学院</a><br/>

     <button id="a1">显示href属性的值</button>

     </div>

     <br><hr>

     <h3>4:设置内容 - text()、html() 以及 val();

         text() - 设置或返回所选元素的文本内容;

         html() - 设置或返回所选元素的内容（包括 HTML 标记）;

         val() - 设置或返回表单字段的值

     </h3>

     <div>

         <p class="p1">这是一个段落</p>

         <p class="p2"><b>这是另一个段落</b></p>

         输入框：<input class="p3" type="text" value="柠檬学院"/><br/><br/>

         <button class="b1">设置文本</button>

         <button class="b2">设置HTML</button>

         <button class="b3">设置值</button>

     </div>

     <br/><hr>

     <h3>5:append() - 在被选元素的结尾插入内容;

         prepend() - 在被选元素的开头插入内容;

         after() - 在被选元素之后插入内容;

         before() - 在被选元素之前插入内容

     </h3>

     <p class="s2">柠檬学院</p>

     <button class="s1">末尾添加文本</button>

     <p class="f2">柠檬学院</p>

     <button class="f1">开头插入文本</button>

     <br/>

     <img src="index.jpg"/><br/>

     <button id="q1">之前</button>

     <button id="q2">之后</button>

     <br><hr>

     <h3>6:remove() - 删除被选元素（及其子元素）;empty() - 从被选元素中删除子元素

     </h3>

     <div id="g2" style="width:200px;height:200px;background-color:pink">

         <p>柠檬学院棒棒哒</p>

         <p>我要成为柠檬人</p>

         <p>为了柠檬而奋斗</p>

     </div>

     <button id="g1">删除</button>

     <hr>

     <div id="k2" style="width:200px;height:200px;background-color:pink">

         <p>柠檬学院棒棒哒</p>

         <p>我要成为柠檬人</p>

         <p>为了柠檬而奋斗</p>

     </div>

     <button id="k1">删除</button>

     <br><hr>

     <h3>7:addClass() - 向被选元素添加一个或多个类;

         removeClass() - 从被选元素删除一个或多个类;

         toggleClass() - 对被选元素进行添加/删除类的切换操作;

         css() - 设置或返回样式属性;

     </h3>

     <h2>柠檬学院</h2>

     <i>柠檬人</i><br/>

     <button id="c1">为元素添加css样式</button>

     <button id="c2">删除元素的css样式</button><br/>

     <h4>柠檬人加油！！！</h4>

     <button id="c3">切换css</button>

     <br><hr>

     <h3>

         8:css() 方法设置或返回被选元素的一个或多个样式属性。

     </h3>

     <div>

         <p style="background-color:red;">柠檬学院</p>

         <p style="background-color:yellow;">柠檬学院</p>

         <p style="background-color:pink;">柠檬学院</p>

         <p style="background-color:blue;">柠檬学院</p>

     </div>

     <button id="d1">设置css样式</button>

 </body>

 </html>

jQuery的简单入门练习的更多相关文章

  1. JQuery Mobile 简单入门引导

    看了慕课网的jqm视频(http://www.imooc.com/learn/207),觉的不错,简单截几个图,做一下备忘:

  2. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

  3. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  4. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  5. Bootstrap简单入门

    Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...

  6. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  7. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  8. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  9. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

随机推荐

  1. 【iOS问题】The file “XXX.app” couldn’t be opened because you don’t have permission to view it.

    当引入第三方的框架的时候 容易产生以下问题: The file "XXX.app" couldn't be opened because you don't have permis ...

  2. gcc编译时指定链接库的查找目录

    gcc编译时,如果需要链接的库的目录不在标准目录,则需要通过将保护库的目录/aa/bb/cc通过-L/aa/bb/cc 添加到搜索路径中,如: gcc -o xmltest xml_test.cpp ...

  3. 退役？OR 继续

    今天突然想了好多.上次CB那么决绝的退役,还有其他的一些东西.觉得大家说的都挺对的.看待问题的方式不同,然后或多或少就变了.预备役的事情就是想能不能不让大家因为上不了场退役. 想起以前的自己那么坚决的 ...

  4. 数据库操作（C#）

    数据库在软件开发中发挥着举足轻重的作用,基本上所有的大项目都会用到数据库.ADO .Net是一组向.Net程序员公开数据访问服务的类,其主要分为数据提供程序(Data Provider)和数据集(Da ...

  5. 第一章 zookeeper基础概念

    1.ZooKeeper是什么 ZooKeeper为分布式应用提供了高效且可靠的分布式协调服务,提供了统一命名服务. 配置管理和分布式锁等分布式的基础服务.在解决分布式数据一致性方面, ZooKeepe ...

  6. aix 6+ mount 光驱

    AIX 挂载光驱的方法 系统环境: [root@Big A:/1]#oslevel -s6100-06-00-0000 [root@Big A:/]#crfs -v cdrfs -p ro -d '/ ...

  7. Nginx虚拟目录支持PHP配置

    感谢作者:http://blog.csdn.net/fangaoxin/article/details/7030139 location ~ ^/test/.+\.php$ { alias /var/ ...

  8. Coredata 的deletedObjects 方法的使用 附带终止程序的函数

    abort();//终止程序 NSFetchRequest *request = [[NSFetchRequest alloc] init]; NSEntityDescription *entity ...

  9. MYSQL基础--学习笔记

    最近一段时间,系统的学习了下mysql相关知识,当然都是比较基础的,现在贴出来,以供参考备忘--帅帅的小猪猪 创建用户:CREATE USER 'sampadm'@'localhost' IDENTI ...

  10. Webpack使用教程二

    Webpack提供了很多的命令选项来帮助用户构建应用,如果只是通过命令行来使用这些选项,会显得不方便.为了更好的使用Webpack提供的各种命令选项,我们可以创建一个webpack.config.js ...