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. 寒假训练 A - A Knight's Journey 搜索

    Background The knight is getting bored of seeing the same black and white squares again and again an ...

  2. 【洛谷】【动态规划/01背包】P2925 [USACO08DEC]干草出售Hay For Sale

    [题目描述:] 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草． 顿因有H(1≤H≤5000)包干草,每一包都有它 ...

  3. laravel的启动过程---摘自网络博客个人学习之用

    如果没有使用过类似Yii之类的框架,直接去看laravel,会有点一脸迷糊的感觉,起码我是这样的.laravel的启动过程,也是laravel的核心,对这个过程有一个了解,有助于得心应手的使用框架,希 ...

  4. 手把手教你Chrome浏览器安装Postman（含下载云盘链接）(转)

    文章转自http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...

  5. PAT A1141 PAT Ranking of Institutions （25 分）——排序，结构体初始化

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  6. AI 反向传播神经网络

    反向传播(Back Propagation,简称BP)神经网络

  7. Trusted Block Chain Summit（2018.10.09）

    时间:2018.10.09地点:北京金隅喜来登大酒店

  8. Luogu P4587 [FJOI2016]神秘数

    一道好冷门的好题啊,算是对于一个小结论和数据结构的一点考验吧 首先看完题目我们发现要从这个神秘数的性质入手,我们观察or手玩可得: 如果有\(x\)个\(1\),那么\([1,x]\)都是可以表示出来 ...

  9. [Oracle]构筑TDE 环境的例子

    构筑TDE 环境的例子: 测试环境:12.1.0.2 $ cd $ORACLE_HOME/network/admin$ vim sqlnet.ora $ pwd/u01/app/oracle/prod ...

  10. Nginx---应用场景小结

    Nginx介绍   Nginx一是一款轻量级的.高性能的HTTP.反向代理服务器,具有很高的稳定性.支持热部署.模块扩展也非常容易.Nginx采取了分阶段资源分配技术,处理静态文件和无缓存的反向代理加 ...