html5 新选择器 querySelector querySelectorAll

本文详细介绍了querySelector方法的使用实例,包括如何通过ID和类名查询元素,以及返回单个元素或元素集合的方法。文章还展示了在不同浏览器中的兼容性情况,并提供了测试代码以确保正确使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 querySelector 返回满足条件的单个元素

使用实例

HTML

<div id="main">主体布局</div>

JS

var main =document.querySelector('#main');

console.log(main)

这时候结果返回的就是 整个元素 <div id="main">主体布局</div>

返回一个查询元素

测试谷歌 IE11 IE10 IE9  火狐  可以正常使用

PS: 如果接受多个查询参数 只返回第一个查询结果

上面的比如这样查询 document.querySelector('#main,.footer')

只返回<div id="main">主体布局</div>

截图

querySelectorAll 返回满足条件的所有元素集合

HTML

<div class="footer">底部1</div>

<div class="footer">底部2</div>

JS

var footer = document.querySelectorAll('.footer');

console.log(footer);

结果是一个数组 选择其中的一个就要用footer[0] footer[1]

结果

footer[0] 返回<div class="footer">底部1</div>
footer[1] 返回<div class="footer">底部2</div>

PS:可以接受多个参数 都返回到数组里

document.querySelectorAll('#main,.footer')

返回的是三个 

直接看截图

转载于:https://www.cnblogs.com/xxx91hx/p/4720227.html

删除之类操作需要全选功能,方便选择 public class MainActivity extends Activity { private ListView lv; private MyAdapter mAdapter; private ArrayList list; private Button bt_selectall; // private Button bt_cancel; // private Button bt_deselectall; private int checkNum; // 记录选中的条目数量 private TextView tv_show;// 用于显示选中的条目数量 /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* 实例化各个控件 */ lv = (ListView) findViewById(R.id.lv); bt_selectall = (Button) findViewById(R.id.bt_selectall); // bt_cancel = (Button) findViewById(R.id.bt_cancelselectall); // bt_deselectall = (Button) findViewById(R.id.bt_deselectall); tv_show = (TextView) findViewById(R.id.tv); list = new ArrayList(); // 为Adapter准备数据 initDate(); // 实例化自定义的MyAdapter mAdapter = new MyAdapter(list, this); // 绑定Adapter lv.setAdapter(mAdapter); // 全选按钮的回调接口 bt_selectall.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 遍历list的长度,将MyAdapter中的map值全部设为true for (int i = 0; i < list.size(); i++) { MyAdapter.getIsSelected().put(i, true); } // 数量设为list的长度 checkNum = list.size(); // 刷listview和TextView的显示 dataChanged(); } }); // 反选按钮的回调接口 // bt_cancel.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View v) { // // 遍历list的长度,将已选的设为未选,未选的设为已选 // for (int i = 0; i < list.siz
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值