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. Properties集合_list方法与store方法

    Properties集合和流对象结合的功能 list()方法: import java.util.Properties; public class PropertiesDemo { public st ...

  2. 一个非常好的php实现手机号归属地查询接口类

    前一阵子看到了一个非常好的php手机归属地查询的类,写的很精简,查询也很精确!大致代码是这样的: <?php header("Content-type:text/html;charse ...

  3. 【html5】如何让Canvas标签自适应设备

    javascript方法: var oC=document.querySelectorAll('canvas')[0];oC.width=document.documentElement.client ...

  4. DRF跨域,简单请求和复杂请求

    跨域就是跨域名,跨端口 - 为什么会有跨域? 浏览器有同源限制策略 - 绕过浏览器同源策略就可以跨域 -  方式一: jsonp(利用浏览器特性) 在html动态创建script标签 同源策略会阻止a ...

  5. 运行Android Studio自带模拟器报：Guest isn't online after 7 second...

    今天在运行Android Studio自带的手机模拟器时,出现如下异常情况 : 解决办法: 1.打开Android Virtue Device Manager,点击编辑选项 2.点击show Adva ...

  6. java Switch中的case后面加上大括号({})和不加大括号的区别

    java基础求真之switch 的case 后面加上大括号和不加大括号的区别. 下面给出三段代码大家看一下有什么不同以及哪段代码能够编译通过那段代码编译不能通过,为什么?(Why?) 代码片段一: i ...

  7. node 命令行升级版本

    node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的. 1. 首先安装n模块: npm install -g n 2. 升级node.js到最新稳定版 n stable ...

  8. b/s程序真的很方便部署吗

    公共应用当然是web系统,这个不说,我说的是企业应用. 最近一些年在企业开发中都提倡web应用,仿佛winform可以结束了,但真的这样吗?最近几天的真实经历如下: 我们部门新开发了一套系统要上线,由 ...

  9. Nowcoder 牛客练习赛23

    Preface 终于知道YKH他们为什么那么喜欢打牛客网了原来可以抽衣服 那天晚上有空就也去玩了下,刷了一波水TM的YKH就抽到了,我当然是没有了 题目偏水,好像都是1A的.才打了一个半小时,回家就直 ...

  10. NOIP2018 模拟赛（二十二）雅礼NOI

    Preface 这次的题目都是NOI+的题,所以大家的分数都有点惨烈. 依靠T1大力骗分水到Rank2 所以想看正解的话看这里吧 A. 「雅礼NOI2018模拟赛(一) Day1」树 看一眼题目感觉十 ...