JQuery学习总结【二】


Posted in Javascript onDecember 01, 2016

一:JQuery知识点

*:JQuery的dom操作

JQuery学习总结【二】

*:动态创建dom节点

比如动态创建表格等,在js里面进行完成。

JQuery学习总结【二】

*删除节点

JQuery学习总结【二】

这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用。

*:document方法

1:.val()可以获取到文本框里面的值,若括号里面有值则直接为赋值。

Eg:加法计算器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#buttons").click(function() {
 var tex1 = $("#tex1").val();
 var tex2 = $("#tex2").val();
 var tex3 = parseInt(tex1, 10) + parseInt(tex2,10);
 $("#tex3").val(tex3);
 });
 });
 </script>
</head>
<body>
 <input type="text" id="tex1"/><input type="button" value="+"/><input type="text" id="tex2"/>
 <input type="button" value="=" id="buttons"/><input type="text" id="tex3"/>
</body>
</html>

JQuery学习总结【二】

2:可以通过attr属性来进行隐藏。

3:在jq里面通过下面的这种形式

(function());这是把一个(function());这是把一个()是让其在ready的时候执行,若是没有这个就是定义了一个方法。

Eg:阅读说明书

JQuery学习总结【二】

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 var leftSeconds = 10;
 var intarvalId;
 $(function() {
 $("#buttons").attr("disabled", true);
 intarvalId = setInterval("CountDom()", 1000);
 });
 function CountDom() {
 if(leftSeconds<=0) {
 $("#buttons").val("同意");
 $("#buttons").attr("disabled", false);
 clearInterval(intarvalId);
 return;
 }
 leftSeconds--;
 $("#buttons").val("请仔细阅读" + leftSeconds + "秒");
 }
 </script>
</head>
<body>
 <textarea>在使用前请仔细阅读说明书。</textarea>
 <input type="button" id="buttons" value="同意"/>
</body>
</html>

Eg:无刷新评论

JQuery学习总结【二】

JQuery学习总结【二】

Eg::文本颜色变化

JQuery学习总结【二】

代码:

JQuery学习总结【二】

JQuery学习总结【二】

Eg:

JQuery学习总结【二】

代码:

JQuery学习总结【二】

JQuery学习总结【二】

*:节点替换

JQuery学习总结【二】

*:样式的操作

JQuery学习总结【二】

*:练习代码

选中的高亮显示,里面就是有如何在jq里面添加css样式。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <style type="text/css">
 #tables {
 margin: auto;
 }
 </style>
 <script type="text/javascript">
 //$(function() {
 // $("#tables tr:first").css("font-size", 30);
 // $("#tables tr:last").css("color", "red");
 // $("#tables tr:gt(0) :lt(6) ").css("font-size", 28);
 // $("#tables tr:gt(0):even").css("background","red");
 //});
 $(function() {
 $("#tables tr").click(function() {
 $("td", $(this).css("background","red"));
 });
 });
 </script>
</head>
<body>
 <table id="tables">
 <tr><td>姓名</td><td>年龄</td></tr>
 <tr><td>小张</td><td>2</td></tr>
 <tr><td>小红</td><td>43</td></tr>
 <tr><td>小路</td><td>23</td></tr>
 <tr><td>小李</td><td>23</td></tr>
 </table>
</body>
</html>

*取的RadioButton操作

JQuery学习总结【二】

*:实例 [全选和反选]

01:这里主要的就是将以前学习到的知识,得以回顾,这样子好记忆。

JQuery学习总结【二】

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#setAll").click(function() {
 $("#List :checkbox").attr("checked",true); //这是div下面的button
 });
 $("#notsetAll").click(function() {
 $("#List :checkbox").attr("checked",false);
 });
 $("#reverse").click(function() {
 $("#List :checkbox").each(function() {
  $(this).attr("checked",!$(this).attr("checked"));
 });
 });
 });
 </script>
</head>
<body>
 <div id="List">
 <input type="checkbox"/>篮球1<br/>
 <input type="checkbox"/>足球2<br/>
 <input type="checkbox"/>篮球3<br/>
 <input type="checkbox"/>篮球4<br/>
 <input type="checkbox"/>篮球5<br/>
 </div>
 <input type="button" value="全选" id="setAll"/>
 <input type="button" value="全不选" id="notsetAll"/>
 <input type="button" value="反选" id="reverse"/>
</body>
</html>

*:事件

   *:jquery里面的click事件就是封装的bind函数,代表点击事件,

   *:hover函数,这里就是监听鼠标的事件。

JQuery学习总结【二】

*:超链接的禁用

<script type="text/javascript">
 $(function() {
 $("a").click(function (e) {
 alert("今天Link不行了");
 e.preventDefault(0); //表示禁用了链接
 });
 });
 </script>
<a href="Hover.html">Link</a>

*:Cookic

定义:它是保存在浏览器上的内容,用户在这次浏览页面向Cookic中保存文本内容,下次在访问的时候就可以取出上次保存的内容,这样子就得到了上次“记忆”内容。Cookic就是存储在浏览器里面的数据。<可以禁用>

特征:

  1:它和域名相关的

《baidu.com的Cookic和taobao.com的Cookic是不一样的。》

  2: 域名写入Cookic的总尺寸是有限制的。几千字节

  3:Cookic不一定可以读取出来,用户可以清除掉了。同时可以被禁用。

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的可以看下上篇JQuery学习总结【一】。同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js中eval详解
Mar 30 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
You might like
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
JS 控制CSS样式表
2009/08/20 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python简单读取json文件功能示例
2017/11/30 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
法律进学校实施方案
2014/03/15 职场文书
服装发布会策划方案
2014/05/22 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL