jQuery简单概要_$(function (){ $("body>div:eq(14)").addclass("ssr"-CSDN博客

本文链接：https://blog.csdn.net/weixin_44614406/article/details/87124927

jQuery手册：http://jquery.cuishifeng.cn/

模块 <-> 类库
DOM/BOM/JavaScript的类库
版本：
1.x 1.12
2.x
3.x

转换：
jQuery对象[0] => DOM对象
Dom对象 => $(DOM对象)

一，查找元素

   DOM:
       10左右

jQuery:

    选择器，直接找到某个或者某类标签

1，id

$('#i1')

2，class

<div calss='c1'></div>
$('.c1')

3，标签

<div id='i10' class='c1'>
    <a>f</a>
    <a>f</a>
</div>
<div class='c1'>
    <a>f</a>
</div>
<div class='c1'>
    <div class='c2'></div>
</div>

$('a') : 找到所有的a标签

4，组合

<div id='i10' class='c1'>
    <a>f</a>
    <a>f</a>
</div>
<div class='c1'>
    <a>f</a>
</div>
<div class='c1'>
    <div class='c2'></div>
</div>

$('a') : 找到所有的a标签
$('.c2') : 找到所有的c2标签
$('a,.c2') : 找到所有的a标签和c2标签
$('a,.c2,#i10')

5，层级

$('#i10 a') 子子孙孙
$('#i10>a') 儿子

6，基本筛选器

:first
:last
:eq()

7，属性

$('[abc]')       具有abc属性的所有标签
$('[abc="123"]') abc属性等于123的标签

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$('input[type="text"]')
$(':text')

实例：

多选，反选，全选
- 选择器
-
    $('#tb:checkbox').prop('checked');      获取值
    $('#tb:checkbox').prop('checked',true); 设置值
-
    jQuery方法内置循环：$('#tb:checkbox').xxxx
-
    $('#tb:checkbox').each(function(k){
        // k 当前索引
        // this,DOM,当前循环的元素 $(this)
    })
- var v = 条件 ? 真值 : 假值;
- 代码
    <script src="jquery.js"></script>
    <script>
        // 自动遍历
        function checkAll(){
            $('#i1:checkbox').prop('checked',true);
        }
        function cencleAll(){
            $('#i1:checkbox').prop('checked',false);
        }
        function reverseAll(){
            $('#i1 :checkbox').each(function(){
                // this代指当前循环的每个元素
                // 反选
                // DOM
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                // jQuery
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }
                */
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>

筛选

$('i1').next()      // 下一个
$('i1').prev()      // 上一个
$('i1').parent()    // 父
$('i1').children()  // 孩子
$('i1').siblings()  // 兄弟
$('i1').find('#i1') // 子子孙孙中查找

$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)

文本操作：

$(...).text()       // 获取文本内容
$(...).text('<a>a</a>')    // 设置文本内容

$(...).html()
$(...).html("<a>a</a>")

$(...).val()         // 获取值
$(...).val(...)      // 设置值

样式操作：

addClass
removeClass
toggleClass

属性操作:

// 专门用于做自定义属性
$(...).attr     // 获取，新增，修改
    $(...).attr('n')
    $(...).attr('n','v')
$(...).removeAttr     // 删除
    $(...).removeAttr('n')

<input type='checkbox' id='i1' checked='checked'/>
// 专门用于checkbox,radio
$(...).prop
$(...).porp('checked')       //获取值
$(...).prop('checked',true)  // 设置值

PS:
    index 获取索引位置

文档操作：

append  添加
prepend
after
before

remove  删除
empty

clone   拷贝

css处理：

$('t1').css('样式名称','样式的值')
点赞：
    - $('t1').append()
    - setInterval
    - 透明度 1 -> 0
    - position
    - 字体大小，位置

点赞源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR. Dong</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
<script src="jquery.js"></script>
<script>
    $('.item').click(function(){
        AddFavor(this);
    });
    function AddFavor(self){
        // DOM对象
        var fontSize = 15;
        var top = 0;
        var right = 0;
        var opacity = 1;


        var tag = document.createElement('span');
        $(tag).text('+1');
        $(tag).css('color','green');
        $(tag).css('position','absolute');
        $(tag).css('fontSize',fontSize + "px");
        $(tag).css('top',top + "px");
        $(tag).css('right',right + "px");
        $(tag).css('opacity',opacity);
        $(self).append(tag);

        setInterval(function(){
            fontSize = fontSize + 5;
            top = top - 5;
            right = right -5;
            opacity = opacity - 0.2;

            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('top',top + "px");
            $(tag).css('right',right + "px");
            $(tag).css('opacity',opacity);

            if(opacity < 0){
                clearInterval(obj);
            }
        },100);

    }
</script>

位置：

$(window).scrollTop()   获取
$(window).scrollTop(0)  设置
scrollLeft([val])

offset().left           指定标签再html中的坐标
offset().top            指定标签再html中的坐标

position()              指定标签相对父标签（relative）
<div style="relative">
    <div id='i1' style='position:absolute;'></div>
</div>

$('i1').height()        # 获取标签的高度，纯高度
$('i1').innerHeight()
$('i1').outerHeight()
$('i1').outerHeight(true)
# 纯高度，边框，外边距，内边距

事件：

DOM:三种绑定方式

jQuery:
    $('.c1').click()
    $('.c1')....

    $('.c1').bind('click',function(){
    })
    $('.c1').unbind('click',function(){
    })

    $('.c1').delegate('a','click',function(){
    })
    $('.c1').undelegate('a','click',function(){
    })

    $('c1').on('click',function(){
    })
    $('c1').off('click',function(){
    })

阻止事件发生：

return false

当页面框架加载完成之后，自动执行

$(function(){
      $(...)
})

jQuery扩展:

- $.extend      $.方法
- $.fn.extend   $(..).方法

(function(){
    var status = 1;
    // 封装变量
})(jQuery)