get():把jQuery转化成原生js

<script>

$(function(){

	//alert($('#div1').get(0).innerHTML);

	//jQuery里面也有属性length

	/*for(var i=0;i<$('li').get().length;i++)

	{

		$('li').get(i).style.background='red';

	}*/

	/*for(var i=0;i<$('li').length;i++)

	{

		$('li').get(i).style.background='red';

	}*/

	for(var i=0;i<$('li').length;i++)

	{

		$('li')[i].style.background='red';//加下标也可以将jQuery转换成原生js

	}

})

</script>

</head>

<body>

<div id="div1">div</div>

<ul>

	<li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

outerWidth与原生offsetWidth的区别：

<style>

#div1{width:100px;height:100px;background:red;display:none;}

</style>

<script>

//offsetWidth:获取不到隐藏元素的值

//outerwidth

$(function(){

	//alert($('#div1').outerWidth());

	alert($('#div1').get(0).offsetWidth);

});

</script>

</head>

<body>

<div id="div1">div</div>

</body>

text()与html的区别

<style>

#div1{width:100px;height:100px;background:red;display:none;}

</style>

<script>

$(function(){

	alert($('div').html());//只能获取到第一个div，标签内容文字全部获取

	//alert($('div').text());//会获取所有的内容，且只能获取文本

	//$('div').html('<h3>h3</h3>');//div内容为h3

	$('div').text('<h3>h3</h3>');//把标签转成文字，div内容为<h3>h3</h3>

});

</script>

</head>

<body>

<div id="div1">div<span>span</span></div>

<div>div2</div>

<div>div3</div>

</body>

页面加载三种写法

<script>

$(function(){//等DOM加载完就可以执行了，比window.onload性能要好，是第二种的简写

	});

$(document).ready(function(){

	});

window.onload=function()//等页面加载完

{

};

</script>

parents

<script>

$(function(){

	$('#div2').parents().css('background','red');

	//获取当前元素的所有祖先节点，参数就是筛选功能

	//$('#div2').parents('body').css('background','red');//参数就是筛选功能

	//$('#div2').closest('body').css('background','red');//获取最近的指定的祖先节点（包括当前元素自身），必须要写筛选的参数，只能找到一个元素

	//$('#div2').closest('.box').css('background','red');

});

</script>

</head>

<body>

<div id="div1" class="box">div

	<div id="div2" class="box">bbb</div>

</div>

</body>

siblings()、nextAll()、prevAll()、nextUntil()

<script>

/*$(function(){

	$('span').siblings().css('background','red');//除了本身之外，让所有兄弟节点变红，参数也是筛选功能

})*/

/*$(function(){

	$('span').siblings('p').css('background','red');//除了本身之外，让所有兄弟节点变红，参数也是筛选功能

})*/

/*$(function(){

	$('span').nextAll().css('background','red');//让span之后的所有兄弟节点变红，参数也是筛选功能

})*/

/*$(function(){

	$('span').prevAll().css('background','red');//让span之前的所有兄弟节点变红，参数也是筛选功能

})*/

/*$(function(){

	$('span').nextUntil().css('background','red');//没有加参数跟nextAll相同

})*/

$(function(){

	$('span').nextUntil('h1').css('background','red');//span下面的到h1的兄弟节点变红

})

//parentsUntil()、prevUntil()也类似

</script>

</head>

<body>

<div>div</div>

<span>span</span>

<p>p</p>

<h1>h1</h1>

<h2>h2</h2>

</body>

clone

<script>

$(function(){

	//$('div').appendTo($('span'));

	//$('span').get(0).appendChild($('div').get(0));

	$('div').click(function(){

		alert(111);

		})

	$('div').clone(true).appendTo($('span'));//克隆节点，可以接收一个参数，作用可以复制之前的操作行为

})

</script>

</head>

<body>

<div>div</div>

<span>span</span>

</body>

jQuery（四）的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...

  3. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

  4. 你不需要jQuery(四)

    jQuery是个好东西.它诞生于IE6在互联网称霸的那个时代.jQuery的存在让我们的代码能很好的兼容各种平台. 然而,到如今,浏览器技术已经取得了巨大的进步.我们可以自由的使用所有最新众多ES5/ ...

  5. 第33日 我疯了集成平台（六）-步履轻盈JQuery(四)

    6一个月28日本,天阴下雨. " 微雨过,小荷翻,榴花开欲燃.玉盆纤手弄清泉,琼珠碎却圆."          古老的JavaScript,且乱且复杂.封装成库,青春焕发,这样人们 ...

  6. 恶补jquery(四)jquery中事件--冒泡

    事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...

  7. jquery四种监听事件的区别

    最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...

  8. jQuery(四)、文档处理

    1 内部插入 1.1 append(content | fn) 向每个匹配的元素内部追加内容. 参数: (1) content:要追加到目标中的内容. (2) function(index, html ...

  9. jQuery(四)--HTTP请求

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

随机推荐

  1. 新鲜出炉的jquery fileupload 插件

    内容属原创,转载请注明出处 为什么做这个东东 项目中需要用到一个多附件上传的控件,找了一圈没找到中意的(唯一一个中意点的还不开源,费用比较高),这不,只得自己抡刀上了. 需求是什么 这么个上传的东东, ...

  2. swift class的缺省基类（SwiftObject）与内存模型

    Hard Constraints on Resilience The root of a class hierarchy must remain stable, at pain of invalida ...

  3. meta标签使用方法总结

    meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原 ...

  4. windows下elasticsearch6.X安装IK分词器

    文章来源:https://www.cnblogs.com/hts-technology/category/1167823.html (一)到官网下载https://github.com/medcl/e ...

  5. 转载 使用axis2构建webservice

    axis2是可以实现webservice的一个插件,使用这个插件可以发布webservice 1:可以使用这个插件来发布webservice,可以看网址:http://clq9761.iteye.co ...

  6. npm和node的版本过低时的解决办法

    npm版本过低时的解决办法npm全名Node Package Manager 1.配置源的三种方法:1).npmrc文件的作用,就是配置npm源:使用淘宝源的方法就是在文件.npmrc中加入下面的语句 ...

  7. Rman将数据文件恢复到不同的路径

    RMAN> startup nomount connected to target database (not started)Oracle instance started Total Sys ...

  8. Cesium学习1：如何在本机的Apache tomcat9.0.8服务器中打开cesium的index.html页面

    Cesium的官方网站:https://cesiumjs.org/ 点击这个按钮来获取最新的Cesium:下载Cesium. 下载完成之后将zip文件解压到你选择的新目录,解压之后文件目录类似于下图. ...

  9. [转]QDir类及其用法总结

    直接给出原文链接:QDir类及其用法总结

  10. mysql试题

    drop,delete与truncate的区别:优先级: drop > truncate > deleteTRUNCATE 按行删除并不把删除操作记录记入日志保存(不可恢复)DELETE ...