Day02jQuery遍历

news/2024/7/10 22:48:23 标签: jquery, javaweb, 遍历
  1. 两种对象转化

将dom对象——转化为——jquery对象

        $(dom对象)                  eg:$(dom)

jquery对象——转化为——dom对象

        jquery对象.get(0);            eg:  jquery.get(0)

2.遍历

$(selector) ——jquery对象 ——–size()或者length //元素个数
—————————-eq(index) //获得index下标位置元素(jquery对象)
1)jquery方式操作数组

var spans = $('span');
for(var i=0; i<spans.size();i++){
    //获得当前i下标元素
    var sp = spans.eq(i);//获得当前i下标元素(jq对象)
    console.log(sp.text());
}

2)使用js中dom对象方式来遍历
jquery对象.get(i),获取的是dom对象
eg: spans.get(i),获得当前i下标对应dom对象

//divs.size()等价于divs.length
//使用js中dom对象遍历
var divs = $('div');
for(var i=0; i<divs.length;i++){
        var d = divs.get(i);//获得当前i下标元素(dom对象)
        console.log(d);//可以用dom对象直接输出
        console.log($(d));//也可以转化为jq对象输出               
    }

3)jquery特有的each()遍历

divs.each(); //遍历divs数组

//使用jquery特有的each方法进行遍历
            var divs3 = $('div');
            divs3.each(function(){
                //this-------当前被遍历的dom对象
                //$(this)------当前被遍历jquery对象
                console.log(this);
                console.log($(this));
            })

3.遍历筛选附近元素

1)parent() //返回指定元素的父标签


console.log($('#id2').parent());

2)children() //获得当前对象所有的子对象


console.log($('#tb').children());

3)prev() //直接相邻哥哥标签


console.log($('#tb').prev());

4):next() //直接相邻弟弟标签


console.log($('#tb').next());

http://www.niftyadmin.cn/n/1492261.html

相关文章

Day03jQuery事件绑定

事件绑定 基于HTML实现的事件绑定 存在耦合 //HTML:<input type"button" value"按钮" id"btn" onclick"test()"/> //Script:function test(){alert("按钮点击了");} 2.基于编程的方式给标签添加事件 注意&#xff1…

jsp下拉框select中options遍历集合

第一种方式&#xff1a;使用options <form:options items"后台传过来的集合" itemLabel"取集合中的某个属性进行显示" itemValue"将遍历的值赋值给某个属性" htmlEscape"设置是否启用默认html字符转换,填true或者false"/> 注意…

Day04jQueryDOM编程相关函数

DOM编程相关函数 注意&#xff1a; 1.1.在事件函数中this&#xff0c;代表触发该事件的事件源—dom对象&#xff08;this&#xff0c;事件标签对象&#xff09; 1.2.内置jquery的事件绑定为静态绑定 1.3 $jq.live(事件名称&#xff0c;绑定的函数)&#xff1b;动态绑定 事件…

Day05jQuery相关插件(日期,放大镜,表单验证)

1.日期插件 1)引入datepicker插件相关的js文件和css文件 直接将文件夹引入,导入WdatePicker.js即可 2)在input增加class’Wdate’,绑定单击事件&#xff0c;函数名WdatePicker() 3)可控参数: { dateFmt 日期显示格式, readOnly 是否只读, input输入框是否可改 isShowWee…

1.JSON基础语法

JSON语法规则 1.JSON语法是javaScript对象表示语法的子集。 语法&#xff1a; 1.1 数据在名称/值对中 1.2 数据由逗号分隔 1.3 花括号保存对象 1.4 方括号保存数组 2.JSON数据的书写格式是&#xff1a;名称/值对 名称/值对包含字段名称&#xff08;在双引号中&#xff09;…

Day02Ajax post请求

ajax操作中以post方式提交异步请求 a) 创建xhr var xhr new XMLHttpRequest(); b) 发送请求 xhr.open("post","url"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在post请求中有这句话&#x…

controller跳转controller

1.不带参数跳转 1.1 同一个controller内部跳转 return "redirect:/toList"; //可以省略一层路径 等价于 return new ModelAndView("redirect:/toList"); 1.2 不同controller内部跳转 return return "redirect:/MESBcElectric/list"; …

Day03jquery框架对于ajax的封装

jquery框架对于ajax的封装 1. jquery封装ajax加载机制 $.ajax({ }); $.ajax({type:get|post, // 异步请求的提交方式,若不写&#xff0c;默认get方式,相当于methodurl:"/ajax/check", //提交的路径&#xff0c;如&#xff1a;/ajax/check 若是get则后直接跟参数…