查找DOM

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
</head>
<body>
<ul class="myUl">
    <li class="act_p2">1_111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li>
    <li class="act_p2">1_222_222_222_222_222_222_222_222_222_222_222_222_222_222_222_222_222_222_222</li>
    <li class="act_p2">1_333</li>
</ul>
<button class="addli">addLi</button>

<script>
    function p2NumLimit(){
        //把类名为act_p2的li限制字符长度为28。
        $(".act_p2").each(function(){
            var maxwidth = 28;
            if($(this).text().length > maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+‘…‘);
            }
        });
        $(".myUl").on("click",".act_p2",function(){
            //事件代理,如果 act_p2是输入框就可以添加失去焦点的事件
            alert("sss");
        })
    };
    p2NumLimit();
    $(‘.addli‘).on("click",function(){
        $(".myUl").append("<li class=‘act_p2‘>44444444444444444444444444444444444444444444444444</li>");
        p2NumLimit();//只能每次动态添加数据后,执行这个方法
    })
</script>
</body>
</html>
时间: 2024-11-04 11:55:46

查找DOM的相关文章

基于jQuery查找dom的多种方式性能问题

这个问题的产生由于我们前端组每个人的编码习惯的差异,最主要的还是因为代码的维护性问题.在此基础上,我对jQuery源码(1.11.3)查找dom节点相关的内容进行了仔细的查阅,虽然并不能理解的很深入 ..同时基于对浏览器console对象的了解产生了一系列之后的问题和分析,对jQuery最常用的三种dom查找方式进行了一个查找效率和性能方面的比较分析. 首先我们要用到的是   console.time()   和   console.timeEnd()   这两个成对出现的console对象的方

Jsoup(二)-- Jsoup查找DOM元素

一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询DOM getElementsByClass(String className) 根据样式名称来查询DOM getElementsByAttribute(String key) 根据属性名来查询DOM getElementsByAttributeValue(String key,String val

查找Dom树中所有&lt;li&gt;的元素,并改变其内容

首先:所有的<li>不在同一列表,并分布在不同段落! 解:用不同的CSS选择器去选择DOM中的某一部分 CSS                           JQuery p {...}  选择所有段落          $("p"); #container{...}                 $("#container"); .articles{...}                      $(".articles"

Jsoup查找dom元素

package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods.CloseableHttpResponse;import org.apache.http.client.methods.HttpGet;import org.apache.http.impl.client.CloseableHttpClient;import org.apache.http.impl

js调试--查找dom对象绑定的函数

点击最右侧的js文件. 选中函数upload_pic_box,右击,选择在控制台中调试,或者在控制台直接输入该函数 点击最后一行代码会打开该函数所在的js文件

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有

javascript DOM编程艺术(检测与性能优化)

一.对象检测(是否支持js方法):只有支持了该方法才可调用 if(!getElementById || getElementsByTagName){ return false; } 二.性能考滤 1.尽量少访问DOM和尽量减少标记:以下面代码为例 if(document.getElementsByTagName("a").length > 0){ var aLiks = document.getElementsByTagName("a"); for(var i

JavaScript 通过“类”来查找元素

今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定一个父级的ID. 最后只能全页面进行匹配! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: 1 function $(name,id){ 2 3 // BUG Handle 4 try{ 5 if(

JQuery选择器和DOM的操作-入门学习

嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因.好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作. 一.JavaScrip