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. NSIS学习记录の----查找注册表某个键是否存在

    最近要做一个注册表的判断.以往都是注册表某个键的键值存在查找,但是如何判断一个空键值的键是否存在呢(很多大厂装逼不写键值,有默认就好)? 下面给出解决办法(要沟通请邮件联系:7-7-2-7-0-6-5 ...

  2. UVA1599-Ideal Path（BFS进阶）

    Problem UVA1599-Ideal Path Time Limit: 3000 mSec Problem Description New labyrinth attraction is ope ...

  3. Ignatius and the Princess III（方案背包+搜索）

    就是问你,n这个数可以被多少种方案组成. 比如: 算是,方案+完全背包的模板题了. #include<iostream> #include<cstring> using nam ...

  4. python 全栈开发，Day39(进程同步控制(锁,信号量,事件),进程间通信(队列,生产者消费者模型))

    昨日内容回顾 python中启动子进程并发编程并发 :多段程序看起来是同时运行的ftp 网盘不支持并发socketserver 多进程 并发异步 两个进程 分别做不同的事情 创建新进程join :阻塞 ...

  5. Centos 7 KVM安装win10

    KVM架构: KVM 是基于虚拟化扩展(Intel VT 或者 AMD-V)的 X86 硬件的开源的 Linux 原生的全虚拟化解决方案.KVM 中,虚拟机被实现为常规的 Linux 进程,由标准 L ...

  6. Linux C++调试利器-gdb

    在Linux上开发后台C++程序时,没有类似Windows VisualStudio那样强大的可视化IDE.为了提高调试效率,快速定位问题,需要掌握gdb工具的一些基本用法. 添加调试符号信息  co ...

  7. MySQL 基础十一 事件

    1.查看事件 2.创建事件 3.执行事件,并查看执行结果是否正确 一 查看事件 -- 1.查看所有事件(显示执行频率(按年.月.日).创建日期.最后执行事件等)SELECT * FROM mysql. ...

  8. Lodop 打印控件

    1.下载 2.使用 一 下载安装控件 官网下载地址:http://www.lodop.net/download.html 参考:http://www.c-lodop.com/demolist/Prin ...

  9. kubernetes 持久化部署lamp类型网站

    1.构建mariadb的镜像 cat Dockerfile FROM mariadb:latest ADD twocloud_kk.sql /docker-entrypoint-initdb.d #C ...

  10. C语言中getch()、getche()和getchar()

    本文章为转载文章,文档贡献者wdzhangxiang 个人网址:www.baidu.com/p/wdzhangxiang 首先不要忘了,要用getch()必须引入头文件conio.h,以前学C语言的时 ...