JQuery——相关练习
####JQuery的基本语法
<!--导入JQuery文件-->
<script src="js/jquery-3.1.1.min.js">
/*带min的是压缩后的JQuery*/
</script>
<!--JQuery文档就绪函数
文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery
$(document).ready(function(){ ---jQuery functions go here --- })
-->
<script type="text/javascript">
// hide隐藏元素
// show显示元素
$(document).ready(function(){
$('p').hide();
});
//文档就绪函数 ：简化
$(function(){
$('p').hide();
})
</script>
<body>
<p>这是p标签的第一段内容</p>
<h2>这是p标签的第二段内容</h2>
<!--<script type="text/javascript">
// hide隐藏元素
// show显示元素
$('p').hide();
</script>-->
</body>
####DOM节点操作 创建和删除
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//添加节点
var table = $("<table><tr>tr内容</tr></table>");
$("div").append(table);
})
//删除节点
$(function(){
var table = $("<table id='t'><tr>tr内容</tr></table>");
$("div").append(table);
table.remove();
//克隆
table.clone().appendTo("div");
})
</script>
<body>
<div></div>
</body>
####CSS操作 循环转播
<!--引入jquery-->
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).toggleClass('a');
//$(this).addClass('a');
}).mouseout(function(){
$(this).toggleClass('a');
//$(this).removeClass('a');
});
})
</script>
<body>
<div id="d">
sdkfjs
</div>
</body>
####CSS操作
<!--引入jquery-->
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: blue;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#d").mouseover(function(){
$(this).addClass('a');
}).mouseout(function(){
$(this).removeClass('a');
});
})
</script>
<body>
<div id="d">
sdkfjs
</div>
</body>
####通过jQuery修改CSS样式
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//一个属性
/* $("div").css('background-color','red');*/
//多个属性
$("div").css({'background-color':'red','height':'100px',"width":"50px"});
})
</script>
<div>
div中的内容
</div>
####操作元素属性
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//获取input的name属性值
/* alert($('input').attr('name'));*/
//修改input的name属性值
/* $("input").attr('name','name被修改的属性值');
$("input").attr('type','password');
$("input").attr('id','text');*/
//一次性修改以上三个内容
//修改元素的所有属性值
$("input").attr({'name':'name值','type':'password','id':'id值'})
//多个属性值一起修改，调用attr方法，把所有要修改的属性放在{ }中，属性之间用 , 分隔
//属性名与属性值之间用 : 隔开
})
</script>
<body>
<input type="text" name="ipt" value=""/>
</body>
####解决多库冲突
<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//放弃$符号
jQuery.noConflict();
jQuery("#a").html('sddsdsdfsdfs')
})
</script>
<body>
<div id="a"></div>
</body>
####JS对象与JQuery对象相互转换
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//原生的JS对象与JQuery对象不是一个概念，二者不可互相调用
var d = document.getElementById('d');
/* //JS的方式添加内容
d.innerText = '添加的内容';*/
//原生DOM（JS对象）转换为JQuery对象：$(原生对象)
$(d).html('将d放在$符号当中转换');
//JQuery方式
var d = $('#d');
//JQuery的方法调用ID为d的对象
d.html('JQuery添加的内容');
var e = $("#e");
//这个不能实现
// e.innerText('JQuery对象不能直接调用JS的原生方法');
//JQuery对象转原生对象：$(...)[0] 转原生对象用下标，只能用下标为0转换。
e[0].innerText('JQuery对象不能直接调用JS的原生方法');
//方法二： $(...).get(0)
e.get(0).innerText('通过get方法添加的内容');
})
</script>
<body>
<div id="d"></div>
<div id="e"></div>
</body>
JQuery——相关练习的更多相关文章
- JQuery 相关用法和操作
01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...
- jQuery相关知识总结
1 encodeURIComponent(city)处理js传值乱码问题 2 总体概述 以后项目如果没有特殊情况,一般采用jQuery作为最基础的公共底层库. 另外对于前端的javascript相关的 ...
- 【转】JQUERY相关的几个网站
作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的. 2. Filmament ...
- jQuery相关面试题
1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境 下载jqu ...
- 【summary】JQuery 相关css、ajax、数据操作函数或方法
总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...
- 学习MVC和jQuery相关的书
Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书: 十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...
- JQUERY相关
https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...
- jquery学习笔记----jquery相关的文档
http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...
- jquery相关校验以及jquery其他知识总结
//************jquery校验**********/ //数字校验(整数)function isDigit(str) { var patrn=/^[0-9]*$/; return pat ...
- jquery 相关class属性的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- File对象目录列表器
/****File对象即能代表一个文件又能代表一组目录下的特定文件集:如果它代表一组文件那可以用list方法返回一组字符数组,数组内的对象是该目录下的符合条件的每个文件. 为什么说符合条件下这个前提呢 ...
- 当会打王者荣耀的AI学会踢足球，一不小心拿下世界冠军！
难得的元旦小假期,没有什么比得上在慵懒的冬日艳阳下放松自己,拿起手机,叫上了许久未一起作战的小伙伴,到王者荣耀中激战了一番,仿佛又回到了当年那个年轻的自己. 厉害不,毕竟当年DD也是王者五十星的水平, ...
- 盘点 Java 开发 2020 年发生的几件大事，你必须得知道！
2021 年了,在过去的一年 Java 软件开发行业都发生了哪些重大事件呢? 这篇栈长带大家回顾一下,其实在元旦的<滚蛋吧,2020>也略有介绍,这篇就更加详细的总结一下. 1.Java ...
- Kafka基本原理概述
Kafka的基本介绍 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/ngi ...
- 雅虎(ycsb)测试hbase（压测）
一.下载ycsb 0.10包 https://github.com/brianfrankcooper/YCSB/releases/download/0.10.0/ycsb-0.10.0.tar.gz ...
- 风炫安全WEB安全学习第二十七节课 XSS的防御措施
风炫安全WEB安全学习第二十七节课 XSS的防御措施 XSS防御措施 总的原则 控制好输入/输出 过滤:根据业务需求进行过滤,对email,手机号码这样的输入框进行验证. 转义:所有输出到前端的数据都 ...
- 杭电OJ----1002A + B问题II（超大数计算问题）
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
- 晋升新一线的合肥，跨平台的.NET氛围究竟如何？
大伙可能不知道,2020年合肥已经成功晋升为新一线城市了.本文通过对目前合肥.NET招聘信息以及公众号的相关数据的分析来看下目前合肥.NET的大环境.就着2020中国.NET开发者峰会的顺利举行的东风 ...
- js原型链原理
先附上原型链的图,能看懂的本文就没必要看了,看不懂的可以带着疑问看文章 一.构造函数 什么是构造函数:当一个普通函数创建一个类对象是,那么就程它为构造函数. 特点: 默认首字母大写 使用new关键字来 ...
- SQL注入之堆叠注入（堆查询注入）
Stached injection -- 堆叠注入 0x00 堆叠注入的定义 Stacked injection 汉语翻译过来后,称 为堆查询注入,也有称之为堆叠注入.堆叠注入为攻击者提供了很多的 ...