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. WPFのGrid布局的深度理解

    以下以row定义说明问题,列类似: <Grid>        <Grid.RowDefinitions>            <RowDefinition /> ...

  2. centos7下安装docker（13.3volume生命周期管理）

    本章讨论:volume的备份,恢复,迁移和销毁 1.备份 通过前面的大量的实验,我们知道volume 是依赖host存在的,是host中的文件或目录,所以volume 的备份实际是对文件系统的备份. ...

  3. butter

    题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油.当然,他将付出额外的费 ...

  4. php 生成静态页面

    使用ob函数 <?php require_once(dirname(__FILE__).'/include/config.inc.php'); ?> <?php $dosql-> ...

  5. Qt读取文件时中文乱码问题

    在默认情况下,Qt 以 Unicode 格式处理文本字符,因此,字符本身是不会有问题的.之所以出现乱码,原因在于 Qt 不知道将 Unicode 字符以何种方式显示出来.        文本文件含有简 ...

  6. QT QListWidget 简单的操作

    以下是简单的 listWidget 的方法的功能 listWidget = QListWidget() #实例化一个(item base)的列表 listWidget.addItem('dd') #添 ...

  7. co模块源码学习笔记

    // Sorrow.X --- 添加注释,注释纯属个人理解 /** * slice变量 引用 数组的 slice方法 */ var slice = Array.prototype.slice; /** ...

  8. win10 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建

    win10 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建 重编译的优点:能够调试的时候看OpenCV的源码. 重编译要得到的东西:Debug版本号和Release版本号 ...

  9. CF258D Little Elephant and Broken Sorting/AGC030D Inversion Sum 期望、DP

    传送门--Codeforces 传送门--Atcoder 考虑逆序对的产生条件,是存在两个数\(i,j\)满足\(i < j,a_i > a_j\) 故设\(dp_{i,j}\)表示\(a ...

  10. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...