jQuery基本理解

最新推荐文章于 2022-10-03 15:42:55 发布

cocoljh

最新推荐文章于 2022-10-03 15:42:55 发布

阅读量448

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_44872481/article/details/91399900

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery框架理解

<div id="div">hello world</div>
    <script>
        (function(){
            // 为了能全局下使用jQuery
            window.jQuery = window.$ = jQuery;
            function jQuery(arg){ //arg作为操作参数传入
                return new init(arg);//实现无new操作 init()为入口函数
            }
            function init(arg){
                var dom = document.getElementById(arg.slice(1));
                this[0] = dom;
                this.length = 1;
                return this;
            }
            jQuery.prototype.text = function(){
                console.log('text');
                return this;//原型函数调用后返回jQuery对象 实现链式操作
            }
            jQuery.prototype.css = function(){
                console.log('css');
                return this;;//原型函数调用后返回jQuery对象 实现链式操作
            }
            init.prototype = jQuery.prototype;//jQuery对象原型  与  init对象原型连接 注意 不是jQuery.prototype = init.prototype;
        })()
        console.log($('#div').text().css()); 
        $('#div');
    </script>

DOM属性理解

text() html() value()比较：可以接受函数，函数有2个参数 index element；
text() 取值与赋值都是一组
html() 取值取第一个，赋值赋一组
value() 取值取第一个，赋值赋一组
value() 可以传入一个数组数组内字符串可以设置select的默认选取值，数组也可有多个值，选取多个；例：

<select id="list">
        <option value="cute">可爱</option>
        <option value="tender" selected>温柔</option>
        <option value="no-reason">没有理由</option>
</select>
<button id="btn">btn</button>
<script>
      $('#btn').click(function(){
            $('#list').val(['no-reason']);
        })
    </script>

attr() prop() 方法比较：

attr() prop() 取值取一个，赋值赋一组；

属性：
1：固有属性；
2：自定义属性；
attr() 可以设置，取所有属性
prop() 只能设置，取固有属性，不能操作自定义属性

注意点：
attr()获取没有设置的属性返回值为undefind；
prop() 获取没有设置的属性（前提为固有属性）返回值为空；如取自定义属性返回值为nudefind；

另：有checked类属性 attr() 只要在标签上设置了checked属性就能获取不能获取checked类属性的ture 或者 false的变化；而prop()能获取到checked类属性的变化，并且会返回状态（true false）；

注意：prop()能够设置自定义的属性，但是对DOM结构不起影响，removeprop（）只能删除自定义的属性，不能删除固有的属性，即：removeprop（‘class’）无效；不能删除，但是可以设置为空;

注意： prop()设置checked类的属性值是不要用字符串形式；例：prop(‘checked’,‘true’) 此例错误；

注意：用attr（）来判断元素是否有class名的时候，要把其他设置的class名也要加上；

另注意：后面的classList字符串不能顺序不能错，2个类名之间只能有一个空格，前后也不能有空格；判断用的字符串，应该与html设置的class名字符串保持一致；如html设置的class字符串中间有2个空格，判断的时候只有一个空格，也是错误的，返回条件也是false；
例：

    <div id='test' class="item active"></div>
    if($('#test').attr('class') == 'item active'){
            console.log('true');
        }

addClass() removeClass():
可以接受一个函数，函数返回值为字符串，设置class名称；函数接受2个参数，第一个：index，第二个：className；

jQuery操作css样式

css() 设置width类样式的时候可以用 +=100的方式实现width额依次增加；
css（）要获取多个样式值可以用数组传入样式字符串，获取多个样式值，返回值为一个对象;
例：

<div class="item"></div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $('.item').click(function(){
            $(this).css('width','+=200');
            console.log($(this).css(['width','height','background']));
        })
    </script>

此例中：background获取的为复合属性；width获取的为设置点击时候后增加的300px；
点击事件后console.log打印的对象
注意：
css（‘width’）获取宽度返回的是字符串，string；
width（）获取的宽度返回的是数值，number类型；

width（），innerWidth（），outWidth（），outWidth（true）包括maring区域；此四个方法设置宽度的时候，设置的值过小，只会减小content区域的内容，content最终变为0，就算是再小下去，pading，border，margin区域css样式设置的值不会变；

offset（）与 position（）： offset（）可以传参，position不可以传参；

DOM遍历

each（）与 map（）：
each（）只是遍历，返回遍历的jQuery对象（DOM元素）；map（）方法遍历后会把遍历的DOM元素（满足筛选条件的 : 返回一个新的jQuery对象传入函数的返回值）；

    <style>
        body, ul, li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 200px;
            height: 35px;
            background: #e0e0e0;
            margin: 20px;
            font-size: 25px;
            line-height: 35px;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul>
        <li>
        	 <span class="name">Aimee</span>
       		 <span class="age">18</span>
        </li>
        <li>
        	<span class="name">小蝉</span>
       		<span class="age">10</span>
        </li>
        <li>
        	<span class="name">cc</span>
        	<span class="age">25</span>
        </li>
    </ul>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        var arr = [];
        console.log($('li').each(function(index,ele){
            arr.push($(ele).find('.name').text());
        }));
        // 打印$('li')找到的jQuery对象
        console.log(arr.join(','));
        console.log($('li').map(function(index,ele){
            if($(ele).find('.age').text() > 15){
                return ele;
            }
        }));//打印满足条件的DOM元素li组成jQuery对象
        $('li').map(function(index, ele){
            if($(ele).find('.age').text() > 15){
                return ele;
            }
        }).css('background','#ff6700');//返回满足条件的jQuery对象 可以直接执行链式操作找到的元素；
    </script>

控制台打印返回jQuery对象

DOM查找

parent() 直接父元素
parents（）祖先元素
closest（）最近的selector元素元素；另：closest（）会从只是查起，即只是符合规则，会查找到自身；
offsetparent（）查找最近的有定位的父元素；不可传入参数；
children（）查找子元素，只查找儿子元素；
find（）查找后代所有元素；返回的对象中有一个prevObject属性存储着上一个jQuery对象，为了方便实现链式调用；例：
end（）相当于preObject，回退到上一个查找到的对象；
add （selector | element | jQuery object | html）在选中的jQuery对象后面再添加需要的DOM对象；
addback （）添加上一个jQuery对象，

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        // console.log($('ul').find('li:eq(2)').css('background',"#ff6700")); //返回的对象存储了$('ul')对象；   
        // $('ul').find('li:eq(2)').css('background','#ff6700').prevObject.find('li:eq(3)').css('background','#ff6700');
        // $('ul').find('li:eq(2)').css('background','#ff6700').end().find('li:eq(3)').css('background','#ff6700');// 实现链式调用
        $('li:eq(1)').css('background','#ff6700').nextAll().css("background","red").addBack().click(function(){
            console.log($(this).text());
        })
        console.log($("li:eq(1)").css("background","#ff6700").nextAll().css('background','red').addBack());
        //addBack()添加上一个jQuery对象后形成一个新的jQuery对象，包含上一个jQuery对象DOM和自身的jQuery对象DOM；
    </script>

addBack（）返回的新的jQuery对象;包含上一个 li（2）和 li（3,4）形成的新对象；
addback()

cocoljh

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本理解

jQuery框架理解<div id="div">hello world</div> <script> (function(){ // 为了能全局下使用jQuery window.jQuery = window.$ = jQuery; function jQuery(...
复制链接

扫一扫