20200320jQuery

标签：mod   查找   toggle   cti   osi   ret   opacity   jquery   操作   

jquery基础语法：$(selector).action()

hello

1、选择器

• 基本选择器

$("*")  //选择所有
$("#id")  //根据id选择
$(".class")  //根据class选择
$("element")  //根据标签名字选择
$("div,p")  //选择多个标签

• 层级选择器

$("div1 div2")  //后代选择器，选择所有div中的div2标签
$("div1 > div2")  //子代选择器，选择div1中的第一层为div2的标签
$("div1 + div2")  //匹配div1下紧挨着的div2
$("div1 ~ div2")  //匹配div1下相邻的div2

• 属性选择器

$(‘[id="abc"][name="dongfei"]‘)  //选择属性是name="dongfei"的元素

• 基本筛选器

$("div:first")  //筛选第一个，另一种写法：$("div").first() (推荐)
$("div:last")  //筛选最后一个
$("div:eq(3)")  //筛选第三个
$("div:even")  //筛选偶数
$("div:odd")  //筛选基数
$("div:gt(2)")  //索引大于2的
$("div:lt(2)")  //索引小于2的

• 表单选择器

$(":text")  //选择text类型的input标签，$("[‘type‘=‘text‘]")

• 查找筛选器

hello

    
inner
    
p2
    
    outer
    
p1


111
    
222
    
333
    
444
    
555
    
666

2、菜单示例

        

            

                
菜单一
                

                    
子选项1
                    
子选项2
                    
子选项3
                
            
            

                
菜单二
                

                    
子选项1
                    
子选项2
                    
子选项3
                
            
            

                
菜单三
                

                    
子选项1
                    
子选项2
                    
子选项3
                
            
        
        

    
    

3、属性操作

是否可见
是否可见2

    
ppp

4、遍历循环

001
002
003

5、正反选

    全选
    取消
    反选
    




            
001
        


            
002
        


            
003
        


            
004
        

6、模态对话框

7、文档处理

    
ppp

add

• clone练习示例

    

        +
        

8、css操作

9、返回顶部按钮示例

返回顶部

10、事件绑定和事件委托

• 简写

    $(".returnTop").click(function () {
        $(window).scrollTop(0);
    })

• 全写

    $("ul li").bind("click",function () {
        alert("123")
    })

• 解绑

$("ul li").unbind("click");

• 事件绑定

111
    
222
    
333

add

11、动画效果

• 显示和隐藏

hello world
显示
隐藏

• 淡入淡出：fadein/fadeout/fadeToggle/fadeTo
• 滑入滑出：slideDown/slideUp/slideToggle

12、回调函数

    function f1() {
        $("div").show(1000,function () {
            alert(1000)
        });
    }

13、扩展方法

    $.fn.extend({
        GetText:function () {
            console.log($(this).text());
        }
    });
    $("p").GetText();

20200320jQuery

标签：mod   查找   toggle   cti   osi   ret   opacity   jquery   操作   

原文地址：https://www.cnblogs.com/L-dongf/p/12568369.html