jQuery中的标签选择器是匹配所有元素，如$("a"),匹配所有的a元素，如果要获取给a一个click事件……

Posted 2023-03-29

jQuery中的标签选择器是匹配所有元素，如$("a"),匹配所有的a元素，如果要获取给a一个click事件，在事件的回调函数的代码块里，不用类和id选择器，就像数组一样，怎么指定某一个想要的a标签？如
$(function()
$("a").click(function(event)
event.preventDefault();
$.getJSON("a.json",function(data)
var html="";
$.each(data,function(index,obj)
if(obj.number=="001") //这里我想指定一个a标签，目的是我点它时候，比如页面内容是
// 安徽，下面就html的内容name就是 合肥，如果点的页面是江苏，下面的html内容就是南京。
html += "<font color='red'>"+obj.name+"</font>"+"</br>";

);
$(".city").html(html);
);
);
);
<a id="ah">安徽</a>
<a id="js">江苏</a>
<div id="city">

a标签毕竟需要jq来查找，至少要有一个父级类的id或者class才能查找到子级的a标签，至于哪一个，就eq(index)就可以，绑定的话，类似$(".test a").eq(index).click(function());
不知道解决没解决你的问题追问

你的意思我懂。问题是我不改变我代码的格式，可以增加内容来实现我所描述的功能…………谢谢。

追答

袄，可以试试在each循环外面建一个numflag和一个cityflag，每次遍历用numflag记下当前的Index，如果下一次遍历遍历到了你需要的那个flag譬如001，再用cityflag记下城市名字，最后用html写dom格式
each方法可能这个节奏不太ok，不Ok的话可以换for之类的

追问

是啊。我也觉得直接用each不好控制。哦了，就这样了。

参考技术A $("a").each('click',function(index)

var tar = $(this); //此处定义一个变量保存当前操作的a标签，可在下面调用追问

我each()函数里传的是json格式文件返回来的data，不是事件，事件我是在最外层的处理的。现在我想在内层也就是我上面的代码的框架不变，可以添加东西，来实现我描述 的功能。each里面参数第一个是要遍历的对象，或者直接是回调函数，第一个参数能放对象吗？？？

追答$("a").each('click',function(index)
    var tar = $(this);
    //代码...
    event.preventDefault(); 改成==>return false; 不需要event

参考技术B var array = "安徽":["合肥"],"江苏":["南京"];
$("a").click(function()
    var html = "";
    var key = $(this).text();
    for (var i = 0; i < array[key]; i++) 
        html += "<font color = 'red'>" + array[key][i] + "</font>" + "<br / >";    
    
    $('.city').html(html);
);

追问

我要的name：合肥，id：001；name：南京，id：002都是从json格式的文件里读出来的。就是a.json,用 的时jQuery中封装的ajax技术。在getJSON的回调函数里用each（）函数遍历json文件中的json对象，也就是你写的数组差不多的。谢谢帮忙。

追答

你的json文件有没有和安徽，江苏对应啊？如果没有对应，那怎么取啊

jQuery选择器

选择器是jQuery核心，使用选择器直接修改页面元素样式

 

ID选择器：一般是返回一个固定的元素

$(function (){

$(‘#id‘).css(‘属性如color‘,‘属性值‘);

})

 

元素名称选择器 一般会返回多个元素

$(function (){

$(‘元素名称如div‘).css(‘属性color‘,‘属性值‘);

})

//如果有多个元素，如有多个div，则会修改所有div元素的属性

 

class选择器 //一般会返回多个元素

$(function (){

$(‘.class名称‘).css(‘属性color‘,‘属性值‘);

})

 

$(‘#div > p‘).css(‘color‘,‘red‘);

//改变div下子元素p的颜色为红

 

属性选择器

$("input[type=‘text‘]"); //input下type属性值为text的元素

$("a[href^=‘http://‘]"); 以http://开始的所有元素

$("a[href$=‘.com‘]"); 以.com结尾的所有元素

$("input[type*]"); 所有input下type属性的元素

$("selector[attribute]"); 选择包含给定属性的所有元素

$("input[type=‘text‘][id=‘1‘]");input下type为text,id为1的元素

$("input[type=‘text‘][id=‘1‘],a[href^=‘http://‘][href$=‘.com‘]");

//input下type=text,id=1，a下href以http://开头，.com结尾的元素

 

位置选择器

$("li:first");//选择第一个li标签

$("div:last");选择最后一个div

$("p:odd");选奇数//jQuery中所有元素从0开始，所以第2个p第4个p等会被选中，

而不是第1个第3个……

$("input[type=‘text‘]:even");选择input下type为text的偶数行

$("a:eq(2)");获取第3个a，eq也是从0开始

$("li:gt(2)");第3个li以后的位置，不包含第3个

$("p:lt(1)");第2个段落前的元素，不包含2

 

层叠选择器

$("ul:fitst li")第一个ul下所有li元素

$("ul:first>li")第一个ul下的子li,如果第一个ul里包含另外一个子ul，则只选中第一个ul

下的子li，子ul里的li则不被选中

$("form>div:eq(1)+*")表中下的第二个子div相邻的第一个，也只会选择一个，任意元素

$("form>div:eq(1)~div ")选则表单下第二个div后的所有同级别div

 

表单选择器

$("p:contatins(is)")选中包含is字母的p锻落，contatins获取包含指定内容的组件

$("div:has(input)")选中拥有input的所有div

$("div input")选中的是div下的所有input

$("*:parent")获取所有非空的元素, parent：非空元素

$("*:empty")选中所有空元素，empty空元素：没有子节点，子标签的组件

如：<input type="text" />这就是一个空元素

$(":input")选中所有input表单元素，包括input type属性为selected、button元素

冒号：前什么都没有相当于*

$(":button")获取所有 button元素

$(":button,:submit,:reset")获取Button ，submit ，reset元素

$(":disabled" )等价$("*[disabled=‘disabled‘‘]")选中所有不可用表单 元素

$(":checked")J等价$("*[checked=‘checked‘]")获取被选中的单选框或复选框

 

子元素选择器、可见性选择器

$("li:first-child")选中ul下第一个li元素，如果ul下第一个元素是div，

第二个是li,则会跳过此ul，而只会选择ul第一个元素是li的位置

$("li:last-child")选中最后一个出现的li元素，如果有多个li是多个ul的最后一个节点

则选中全部li

$("ul>li:last")先选中ul下的所有li，然后在选择其中里面最后一个li

.("li:nth-child(3)"),选中所有父节点ul开始数所有第3个元素li，

即有多个ul，则会选中多个ul下的第三个li

若nth-child(1)时,ul下第一个元素不是li，则会依次选择向下选择，直到ul下第一个的li元素

nth-child是从1开始，以前的eq则是从0开始计算元素

$(":visible")选中所有可显示的元素