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——相关练习相关推荐

day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
js、jquery相关的操作
为什么80%的码农都做不了架构师?>>> document.onclick = function(e) {var e = e ? e : window.event;var ta ...
[jQuery基础] jQuery事件相关
事件绑定有两种绑定事件方式 eventName(fn) 编码效率略高/ 部分事件jQuery没有实现,所以不能添加 $(function () {$("button").clic ...
[jQuery基础] jQuery对象 -- CSS相关
CSS相关操作CSS 逐个设置 $(function () {$("div").css("width", "100px")$(" ...
Jquery empty() remove() detach() 方法的区别
方法简介: empty() This method removes not only child (and other descendant) elements, but also any text ...
jQuery权威指南（第2版）
为什么80%的码农都做不了架构师?>>> jQuery权威指南(第2版) 本书由国内资深web技术专家亲自执笔,4大web开发社区一致鼎力推荐,权威性毋庸置疑.内容新颖,基于j ...
jQuery插件：超酷的多列网格式拖放插件gridster.js
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 在线演示本地下载以往的文章中,我们分享了很多jQuery相关拖放插件,今天 ...
JS文件中加载jquery.js(JS文件添加其他JS文件)
最近有一个需求: 1.在一个html中只能引入一个JS文件不能有JS代码和其他JS文件的引入 2.这个JS文件中还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中这些代码用到了jque ...
jq查找字段忽略html标签,jquery内容过滤选择器有哪些？
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text).:empty .:has(seletor) .:paren ...
转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常会引 ...

JQuery——相关练习

JQuery——相关练习相关推荐

最新文章

热门文章