小仙女-Jquery基础

来源：互联网发布：在线监测数据造假编辑：程序博客网时间：2024/04/27 21:11

Jquery基础

1.$(element)

定义和用法

element 选择器选取带有指定标签名的元素。

标签名引用 HTML 标签的 < 与 > 之间的文本。

<script src="./jquerytest/jquery-1.7.1.min (2).js"></script>//配置的jquery<script type="text/javascript">function test1(){$(document).ready(function(){  $("span").css("color","red");//使用element})}

2.$().each

function testA(){var divArr = document.getElementsByTagName("div");for(var i=0;i<divArr.length;i++){alert(divArr[i].innerHTML);//innerhtml获取标签内容  val 获取文本框内容}}function testB(){$("div").each(function(){alert($(this).text());});}

都是找到所有div标签里面的内容 $().text()文本内容

拓展

关于JQuery中的.each()与().each的理解

在学习JQuery中，对于().each方法遇见了.each,在这里记录自己对于这两个东西的理解想、进行记录。

一、$().each

在w3c中对each()的定义是规定为每个匹配元素规定运行的函数。

语法：$(selector).each(function(index,element){ })
参数：index(选择器index的位置);element(当前的元素（也可使用 “this” 选择器）)

例子:定义四个div并用each遍历其中的文本

<div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>$(".item").each(function(){    alert($(this).text());    });1
2
3
4
5
6
7
8
9

这段代码是弹出1,2,3,4.
对于这个方法，在对DOM操作的时候用的比较多

二、$.each();

用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象,尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。

从each()方法前缀我们也可以知道这两个方法的区别。$().each,前面是JQuery选择器，是选择的元素对象。而$.each,前面是JQuery对象，数组或者对象都是Jquery对象，这里又反应了Js中万物皆对象。

语法：$.each(obj,function)
参数：obj：你所要遍历的对象或者数组；function：你所遍历要运行的函数。

例子1：遍历一个json数据

var Json = {'name':'Tom','age':28,'sex':'man'};    $.each(Json,function(key,val){    alert(obj[key]);          //Tom,28,man    //alert(val);           //同样一次弹出Tom，28，man；类型均为字符串})1
2
3
4
5

例子2：

function testC(){var divArr = $("div");$.each(divArr, function(i, div){  alert( "第" + ++i + "个元素: " + $(div).html());});}

3.selector1,selector2,selectorN

V1.0概述

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

描述:

找到匹配任意一个类的元素。

HTML 代码:

<div>div</div><p class="myClass">p class="myClass"</p><span>span</span><p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

function testC(){var classArr = $("#a1,div,span,p.myClass");$.each(classArr, function(i, obj){alert( "第" + ++i + "个元素: " + $(obj).html());});}<body> <div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span><hr><div>div</div><p class="myClass">p class="myClass"</p><span>span</span><h1 id="a1">多多联系</h1><p class="notMyClass">p class="notMyClass"</p><input type="button" value="点我1" onclick="testA()"/><input type="button" value="点我1" onclick="testC()"/></body>

4.parent > child

概述

在给定的父元素下匹配所有的子元素

function testB(){var classArr = $("form > input");$.each(classArr, function(i, obj){alert( "第" + ++i + "个元素: " + $(obj).val());});}<body> <form>  <label>Name:</label>  <input name="name" />-----------------------------显示（子）  <fieldset>      <label>Newsletter:</label>      <input name="newsletter" />----不显示（孙子） </fieldset></form><input name="none" />----没有在指定标签下         <form>  <label>Name:</label>  <input name="name" />-----------------------------显示
 <fieldset> <label>Newsletter:</label> <input name="newsletter" />------不显示（孙子） </fieldset></form></body>


5.parent child
概述
在给定的父元素下匹配所有的子、孙子元素

function testC(){var classArr = $("form input");$.each(classArr, function(i, obj){alert( "第" + ++i + "个元素: " + $(obj).val());});}
6.prev + next
概述
匹配所有紧接在 prev 元素后的 next 元素
HTML 代码:<form>  <label>Name:</label>  <input name="name" />  <fieldset>      <label>Newsletter:</label>      <input name="newsletter" /> </fieldset></form><input name="none" />jQuery 代码:$("label + input")结果:[ <input name="name" />, <input name="newsletter" /> ]
例子 jquery
function testF(){var classArr = $("label + input");$.each(classArr, function(i, obj){alert( "第" + ++i + "个元素: " + $(obj).val());});}

阅读全文

1 0