jq

我在这里只是为了练习和做笔记,详情请看jq的相关教程,如果一下文章有误尽情提出!

核心

  1. jQuery([selector,[context]]) 对标签内匹配的元素做处理

首先解说一下selector和context,
selector用来查找的字符串
context作为待查找的dom元素
例如:$(‘input[name=“text”]’) css选择器对匹配的input的text元素做一些处理

1.找到所有p元素,并且这些元素都必须是div元素的子元素
$('div>p')  表示所有div下的p元素
2.设置页面背景颜色
$(document.body).css('background','black'); 
3.隐藏一个表单中的所有元素
$(myFrom.elements).hide()
4.查找所有的单选按钮(即:type值为radio的input元素)
$('input:radio',document.forms[0])
5.在一个由AJAX返回的XML文档中,查找所有的div元素
$('div',xml.responseXML);
  1. jQuery(html,[ownerDocument]) 用于创建添加标签到指定标签内

html:用于动态创建DOM元素的HTML标记字符串
ownerDocument:创建DOM元素所在的文档

$("<div><p>Hello</p></div>").appendTo("body");

$(document).ready(function(){
     var iframe=$("iframe")[0];
     var doc=iframe.contentWindow.document;
     $("<input class='cl'/>",doc).appendTo(doc.body)
});

$(html,props)
html:用于动态创建DOM元素的HTML标记字符串
props:用于附加到新创建元素上的属性、事件和方法

$('<div>',{
	'class':'test',
	text:'Click me!',
	click:function(){
		$(this).toggleClass('test');
	}
}).appendTo('body');

创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件。
$('<input>',{
	type:'text',
	val:'test',
	function:funtiocn(){
		$(this).addClass('actiove');
	},
	function:function(){
		$(this).removeClass('active');
    }
}).appendTo('form');
  1. $(callback) $(document).ready()的简写。

1.当DOM加载完成后要执行的函数
2.可以在同一个页面中无限次地使用 ( d o c u m e n t ) . r e a d y ( ) 事 件 。 其 中 注 册 的 函 数 会 按 照 ( 代 码 中 的 ) 先 后 顺 序 依 次 执 行 。 3. (document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。 3. (document).ready()3.(document).ready()和传统的方法<body οnlοad=”load()”> 相似,onload()的方法是在页面加载完成后才发生
4.使用document.ready()方法的执行速度比onload()的方法要快。
5.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行

 2. $(function(){}); 
 3. jQuery(function($) {});  
 4. $(document).ready(function(){})
这三个的作用是一样的,第一种、书写简单。文档载入完成后执行的函数
例如:
 $(function(){
     $("#titleDiv").load("content.do?type=list");
 });
 先执行 $(document).ready(function(){})
 后执行 $(function(){})
  1. each(callback) 遍历jQuery对象,每个匹配的元素都会执行该函数
$("[name='hobby']").each(function(){
	 console.log(this);
 });
<input type="checkbox" name="hobby" value="1" checked="checked"/>
<input type="checkbox" name="hobby" value="2"/>
<input type="checkbox" name="hobby" value="3" checked="checked"/>

<img/><img/>
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
 控制台输出 [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

each(object[, callback]) 用于遍历对象(可以是jQuery对象)和数组,其中object表示待遍历的jQuery对象或数组;callback表示每个成员/元素执行的回调函数

<input type="checkbox" name="hobby" value="1" checked="checked"/>
<input type="checkbox" name="hobby" value="2"/>
<input type="checkbox" name="hobby" value="3" checked="checked"/>
1.遍历数组
$.each(['Jim','Tom','Tim'],function(i,value){
	console.log(i+','+value);
});
控制台输出 0,Jim  1,Tom  2,Tim
2.遍历对象
$each($('[name='hobby']'),function(i,value){
	console.log(this);
})
可以使用 'return' 来提前跳出 each() 循环。
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

each(callback)与each(object[, callback])区别
1.调用对象不同:前者必须使用jQuery对象调用;后者只能使用$调用;
2.遍历对象不同:前者遍历的是jQuery对象;后者既可以遍历jQuery对象还可以遍历数组等非jQuery对象;

  1. List item
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页