前端学习之jquery/下
前端学习之jquery
一 属性操作
html():
console.log($("div").html());
$(".test").html("<h1>hello</h1>"); 拿到的是标签 test():
console.log($("div").text());
$(".test").text("<h1>hello</h1>"); 整个纯文本
val():val针对的是固有属性value
console.log($(":text").val());
console.log($(":checkbox").val());
console.log($(":button").val())//val针对的是固有属性value
tab切换案例:
<style>
*{
margin: 0;
padding: 0;
} .outer{
width: 80%;
margin: 0 auto; } .nav li{
float: left;
list-style: none;
width: 100px;
height: 40px;
background-color: #6AA1EA;
text-align: center;
line-height: 40px;
border-right: 2px solid green;
} .content{
width: 306px;
height: 400px;
background-color: #99cc99;
margin-top: 40px; } ul .active{
background-color: #99aecb;
} .hide{
display: none;
}
</style> </head>
<body> <div class="outer">
<ul class="nav">
<li f="con1" class="active">菜单一</li>
<li f="con2">菜单二</li>
<li f="con3">菜单三</li>
</ul> <div class="content">
<div class="con1">111</div>
<div class="con2 hide">222</div>
<div class="con3 hide">333</div>
</div> </div> <script src="jquery-3.2.1.js"></script>
<script>
var outer=document.getElementsByClassName("outer")[0];
var lis=outer.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function () { $(this).addClass("active").siblings().removeClass("active"); var $name=$(this).attr("f"); $("."+$name).removeClass("hide").siblings().addClass("hide")
} } </script>
tab切换案例
二 jquery循环方式
方法一:
//$.each(arr,funtion(){}) //循环语法
arr=[123,456,"hello"];
obj={"name":"egon","age":22};
$.each(arr,function (i,j) {
console.log(i,j)
})
$.each(obj,function (i,j) {
console.log(i,j)
}) 方法二:
$().each(function () {
})
<ul>
<li>111</li>
<li class="item">222</li>
<li>333</li>
</ul>
$("ul li").each(function () {
console.log($(this))
if ($(this).hasClass("item")){
alert($(this).text())
}
})
table正反选示例:
<body> <h1>表格示例</h1>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<hr> <table border="2px">
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr> </table> <script src="jquery-3.2.1.js"></script>
<script>
var eles=document.getElementsByTagName("button");
// var inps=document.getElementsByClassName("item");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
if (this.innerText=="全选"){
// for(var j=0;j<inps.length;j++){
// inps[j].checked=true
// }
$(":checkbox").prop("checked",true);
}
else if (this.innerText=="取消"){
$(":checkbox").prop("checked",false);
}
else{
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked")); //最新优化
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
})
}
}
} </script> </body>
table 正反选示例
三 动画效果
hide()与show()隐藏与显示
<p>hello</p>
<img src="top.jpg" width="400px" height="200px">
<button id="hide">隐藏</button>
<button id="=show">显示</button>
<button id="toggle">切换</button> <script src="jquery-3.2.1.js"></script> <script> //用于切换备选元素的 hide()与show()方法。
// 标签对象.事件(function(){})
$("#hide").click(function () {
$("img").hide(1000); });
$("#show").click(function () {
$("img").show(1000);
}); $("#toggle").click(function () {
$("img").toggle(1000);
}) </script>
滑动效果:
slideDown() slideUp() slideToggle()
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
line-height: 80px;
background-color: #015e98;
} </style>
</head>
<body> <div id="con">滑动效果</div> <button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button> <script src="jquery-3.2.1.js"></script> <script>
$("#slideDown").click(function () {
$("#con").slideDown(1000)
}); $("#slideUp").click(function () {
$("#con").slideUp(1000)
}); $("#toggle").click(function () {
$("#con").slideToggle(1000)
})
</script> </script>
</body>
淡入淡出透明度:
fadeIn() fadeout()
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
height: 200px;
width: 200px;
background-color:#ccecef;
}
</style> </head>
<body> <div id="con"></div> <button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button> <script src="jquery-3.2.1.js"></script>
<script> $("#fadeIn").click(function () {
$("#con").fadeIn(2000)
});
$("#fadeOut").click(function () {
$("#con").fadeOut(2000)
});
$("#fadeToggle").click(function () {
$("#con").fadeToggle(2000)
})
$("#fadeTo").click(function () {
$("#con").fadeTo(1000,0.4) //透明度
}) </script>
回调函数:当某一个动作执行完成之后自动触发的函数
四 文档操作
内部插入:
(append) ( prepend) //父节点添加子节点
<script>
$("button").click(function () {
$("div").append("<h1>hello</h1>");//插入的位置不一样 一个在后面
$("div").prepend("<h1>hi</h1>"); //一个在前面插入
})
</script>
(appendTo)(perpendTo) //子节点插入父节点
<script>
$("button").click(function () {
var $ele=$("<p>hello</p>");
$ele.appendTo("div") //子节点插入父节点
$ele.prependTo("div")//
});
</script>
外部插入:兄弟之间插入
after() before()
$("div").after("<p>pppppp</p>");
$("div").before("<p>pppppp</p>")
insertAfter() insertBefore()
var $ele=$("<p>hello</p>");
// $ele.insertAfter("div")
$ele.insertBefore("div")
替换replaceWith()
$("div").replaceWith("<h1>egon</h1>")
删除
//$("div").empty() //清空文本内容
$("div").remove() //清空整个标签
复制(克隆)
<div class="box">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
</div> <script src="jquery-3.2.1.js"></script>
<script>
$(":button").click(function () {
//var $clone=$(".box .item").clone(); //1变2 2变4
var $clone=$(this).parent().clone();
$clone.children(":button").val("-").attr("onclick","removeA(this)");
$clone.children();
$(".box").append($clone)
});
function removeA(self) {
console.log($(self).parent());
$(self).parent().remove()
}
</script>
前端学习之jquery/下的更多相关文章
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 前端学习之-- Jquery
Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...
- 前端学习之jquery(二)
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
- web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...
- 前端学习之三——jquery选择器
Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器. 1.非基本过滤选择器,一般需 ...
- web前端开发学习:jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
随机推荐
- MSF添加ms17-010的exp脚本及攻击复现
原文地址:https://bbs.ichunqiu.com/thread-23115-1-1.html 本来今晚在准备复现最近的CVE-2017-11882,由于本人是小白一枚,不知道这么添加msf的 ...
- python作业03-文件操作&函数
一.文件处理相关 1.编码问题 (1)请说明python2 与python3中的默认编码是什么?答:Python2默认的字符编码是ASCII,默认的文件编码也是ASCII :python3默认的字符编 ...
- 用C#语言编写:集合管理器
static void Main(string[] args) { List<int> numbers = new List<int>(); ...
- mariadb插入中文数据乱码解决过程
基本情况: 系统:centos 7 mariadb安装方式:yum 乱码解决过程: 查看当前数据库编码(登录数据库后) # show variables like 'character%'; (上图为 ...
- android 滑动分页
import android.app.ListActivity;import android.os.Bundle;import android.os.Handler;import android.vi ...
- lua continue实现
--第一种 , do while true do == then break end -- 这里有一大堆代码 -- -- break end end --第二种 i = ) do if () then ...
- Java基础学习(二)
软件设计原则: 为了提高软件的开发效率,降低软件开发成本,一个优良的软件系统应该具有以下特点: 1,可重用性:遵循DRY原则,减少软件中的重复代码. 2,可拓展性:当软件需要升级增加新的功能,能够在现 ...
- ASP.NET Core原理概述
ASP.NET Core 是一个控制台应用程序,在其 main 方法中创建一个Web服务器,以下是program.cs中的代码: using Microsoft.AspNetCore; using M ...
- vue小白快速入门
一.vue是什么 Vue 是一套用于构建用户界面的渐进式框架. 压缩后仅有17kb 二.vue环境搭建 你直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. 但在用 ...
- Leetcode 5——Median of Two Sorted Arrays
题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...