####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——相关练习的更多相关文章

  1. JQuery 相关用法和操作

    01-JQuery 基础语法: 1.使用JQuery必须先导入JQuery.x.x.xjs文件. 2.JQuery中的选择器: $(选择器).函数() ① $是JQuery的缩写,既可以使用JQuer ...

  2. jQuery相关知识总结

    1 encodeURIComponent(city)处理js传值乱码问题 2 总体概述 以后项目如果没有特殊情况,一般采用jQuery作为最基础的公共底层库. 另外对于前端的javascript相关的 ...

  3. 【转】JQUERY相关的几个网站

    作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的. 2. Filmament ...

  4. jQuery相关面试题

    1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境 下载jqu ...

  5. 【summary】JQuery 相关css、ajax、数据操作函数或方法

    总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...

  6. 学习MVC和jQuery相关的书

    Insus.NET还是较喜欢看纸质书.学习ASP.NET MVC和jQuery编程,Insus.NET为了加强功力,决定再购买几本相关的书:   十月份时,还买了一本: 前两本快递刚送到手,后一本已经 ...

  7. JQUERY相关

    https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...

  8. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  9. jquery相关校验以及jquery其他知识总结

    //************jquery校验**********/ //数字校验(整数)function isDigit(str) { var patrn=/^[0-9]*$/; return pat ...

  10. jquery 相关class属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. FPT: Feature Pyramid Transfomer

    导言: 本文介绍了一个在空间和尺度上全活跃特征交互(fully active feature interaction across both space and scales)的特征金字塔transf ...

  2. 有两张表;使用SQL查询,查询所有的客户订单日期最新的前五条订单记录。

    客户信息表(c CUSTOM)有以下字段:id.name.mobile 客户订单表(C_ORDER)有以下字段:id.custom_id.commodity.count.order _date Sel ...

  3. flink集群模式安装配置

    一.手动下载安装包 wget http://mirrors.tuna.tsinghua.edu.cn/apache/flink/flink-1.6.1/flink-1.6.1-bin-hadoop27 ...

  4. Eureka Server启动过程分析

    1.首先,SpringCloud充分利用了SpringBoot的自动装配特点 eureka-server的jar包,发现在META-INF下面的配置文件spring.factories,里面记录了Sp ...

  5. 将WCF迁移到gRPC

    使用protobuf-net.Grpc将WCF服务迁移到gRPC非常简单.在这篇博文中,我们将看看它到底有多简单.微软关于将WCF服务迁移到gRPC的官方指南只提到了Gooogle.Protobuf方 ...

  6. Python学习-小黑屋游戏

    给大家分享一下有趣的游戏,在大一上学期学习的内容里,小黑屋比较好玩. 1.导入函数库 先导入random.time两个函数库的使用来达到随机生成人物.生成人物加载时间的目的. import rando ...

  7. Java并发包源码学习系列:ReentrantLock可重入独占锁详解

    目录 基本用法介绍 继承体系 构造方法 state状态表示 获取锁 void lock()方法 NonfairSync FairSync 公平与非公平策略的差异 void lockInterrupti ...

  8. DM TDD使用小结

    1.搭建流程 1.1 ss初始化及启动 --->1节点: cd /dm/bin ./dmdssinit path=/dm/data inst=ss1 port=35300 REGION_SIZE ...

  9. 【JS学习】String基础方法

    前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 目录 定义: 字符串的连接: 标签模板的使用: 字符串的基本方 ...

  10. awk -v参数

    -v var=val --assign var=val Assign the value val to the variable var, before execution of the progra ...