jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法

一、总结

1、jquery不懂之处直接看教程,案例都有,有简单又快

2、jquery给input设置值半天没弄出来,因为使用格式错误啊:本来应该是:$("#username").val("student"); 写成了$("#username").val="student";

3、jquery格式:$().()形式,$().val()设置属性,$().click()设置方法,全部是这样的形式,想清楚了怎么可能写错嘛

4、jquery都是放在ready函数中的

5、jquery不管是取值还是设置内容,格式都是$().()形式,所以所jquery很简单嘛

二、jquery简单使用

1、文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

2、获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

 $("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

3、设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:

 $("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});

jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法)的更多相关文章

  1. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

  2. bootstrap-typeahead 自动补全简单的使用教程

    参考链接: 参考1 : https://segmentfault.com/a/1190000006036166参考2 : https://blog.csdn.net/u010174173/articl ...

  3. C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志

    C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...

  4. perl 引用(数组和hash引用) --- perlreftut - Mark 的一个简单的'引用'教程 ---Understand References Today. --Mark Jason Dominus, Plover Systems (mjd-perl-ref+@plover.com)

    https://blog.csdn.net/fangwei1235/article/details/8570886 首页 博客 学院 下载 论坛 APP 问答 商城 活动 VIP会员 招聘 ITeye ...

  5. [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)

    [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...

  6. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  7. Mac新手必看教程—让你离熟练操作mac只差十分钟

    本文收录于:风云社区(提供各类mac软件资源下载) 本文源自:什么值得买 无论轻薄办公本.还是赶超台式性能的游戏本,关注#笔记本攻略#栏目,解决笔记本电脑从选购到使用的各种问题. 引子 大部分用户接触 ...

  8. JS jquery ajax 已看1 有用

    4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...

  9. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

随机推荐

  1. userAgent判断客户端,以及各个浏览器的ua

    userAgent判断客户端,以及各个浏览器的ua http://blog.csdn.net/yoyoosyy/article/details/70142884 navigator.userAgent ...

  2. 1.26 Python知识进阶 - 继承

    继承 继承(Inheritance)是面向对象的程序设计中代码重要的主要方法.继承是允许使用现有类的功能,并在无需重新改写原来的类的情况下,对这些功能进行扩展.继承可以避免代码复制和相关的代码维护等问 ...

  3. 解决ListCtrl控件第一列文字不能居中显示的问题/修改网格线

    把CListCtrl设置为Report风格,但是插入第一列的时候(InsertColumn)的时候会发现文字不能居中.即使使用了LVCFMT_CENTER,其他列都可以正常居中,但第一列仍然靠左显示. ...

  4. 【2017 Multi-University Training Contest - Team 6】Classes

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6106 [题意] 给出选 A,B,C,AB,AC,BC,ABC 课程的学生,其中 AB 是 A 和 B 都 ...

  5. VPS的centOS6安装远程桌面

    VPS的centOS6安装远程桌面 64位系统的需要编译安装 ttp://www.landui.com/help/Show-991.html xrdp是在图形界面下使用的,首先要确定您的centos系 ...

  6. Java – Reading a Large File Efficiently--转

    原文地址:http://www.baeldung.com/java-read-lines-large-file 1. Overview This tutorial will show how to r ...

  7. Altium Designer中Electrical Type的意思

    :之前Altium Designer设计图时发现: 它的引脚上有两个三角 双击打开引脚,打开配置: 于是从网上查了一下:http://blog.csdn.net/jbb0523/article/det ...

  8. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  9. Spring+Struts2+Hibernate的整合

    这篇主要采用Maven搭建Spring+Struts2+Hibernate的整合项目,复习一下SSH框架,虽然spring提供自己的MVC框架, 但是Spring也提供和其他框架的无缝整合,采用组件形 ...

  10. python中线程、进程和协程的区别

    进程是资源分配的单位 线程是操作系统调度的单位 协程,又称微线程,纤程,协程的切换只是单纯的操作CPU的上下文,资源很小,效率高 进程切换需要的资源很最大,效率很低 一个程序至少有一个进程,一个进程至 ...