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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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中echo和print的区别
2014/08/28 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP 类与构造函数解析
2017/02/06 PHP
js切换光标示例代码
2013/10/10 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
vue实现拖拽效果
2019/12/23 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python 解压pkl文件的方法
2018/10/25 Python
Python中捕获键盘的方式详解
2019/03/28 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python tcp传输代码实例解析
2020/03/18 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
学年自我鉴定范文
2013/10/01 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
培训班主持词
2014/03/28 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2016春季运动会开幕词
2016/03/04 职场文书