jq

最新推荐文章于 2024-01-09 21:27:06 发布

Sunshine_xue

最新推荐文章于 2024-01-09 21:27:06 发布

阅读量144

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Sunshine_GirlXue/article/details/107808797

版权

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

核心

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);

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');

$(callback) $(document).ready()的简写。

1.当DOM加载完成后要执行的函数
2.可以在同一个页面中无限次地使用 $(d o c u m e n t) . r e a d y () 事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 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(){})

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对象；

List item

Sunshine_xue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq

我在这里只是为了练习和做笔记，详情请看jq的相关教程,如果一下文章有误尽情提出！核心jQuery([selector,[context]]) 对标签内匹配的元素做处理首先解说一下selector和context，selector用来查找的字符串context作为待查找的dom元素例如：$(‘input[name=“text”]’) css选择器对匹配的input的text元素做一些处理1.找到所有p元素，并且这些元素都必须是div元素的子元素$('div>p') 表示.
复制链接

扫一扫