JQ

Ctrl+Alt+D+L格式化

    //同一个效果 通常采用第二种写法
    $(document).ready(function () {
        console.log(1);  
    });
    //
    $(function () {
        console.log(2);
    });
    //
    jQuery(function () {
        console.log(3);
    });

JQ代码获取的对象都是集合

 $(function () {
        console.log($("*"));//获取所有对象元素
    })
<ul>
    <li>1</li>
    <li id="li2">2</li>
    <li>3</li>
</ul>
<script>
//获取当前元素的子元素 第一个或者最后一个元素
        console.log($("ul>li:first"));
        console.log($("ul>li:last"));
        console.log($("ul>li:last-child"));
        console.log($("ul>li:first-child"));
        //:not  除了谁  获取其他的
        console.log($("ul>li:not(#li2)"));   
        //奇数获取元素
        console.log($("ul>li:even"));
        //偶数获取元素
        console.log($("ul>li:odd"));
        //根据索引获取元素
        console.log($("ul>li:eq(0)"));
        //lt小于索引值的元素 0 1 2
        console.log($("li:lt(1)"));
        //gt大于索引值的元素 0 1 2 
        console.log($("li:gt(1)"));
        //获取的ul里面有
        console.log($("ul:has(#li2)"));
        //获取的元素要有子集 元素或者文本
        console.log($("li#li2:parent"));
        //属性选择器
        console.log($("li[id]"));//具有id这个属性
        console.log($("li[id][class]"));//有id和class属性
        //根据序号获取元素
        console.log($("ul>li:nth-child(3)"));
        //更改button中 class为btn 的按钮的显示内rong
        $("button.btn").html("html");
        $("button.btn").text("html");
        $("button.btn").html("<span>html</span>");//显示时不包含span标签
        $("button.btn").text("<span>html</span>");//显示出来包含span标签
        //获取其中的元素
        console.log($("button.btn").html());
        //遍历按钮 输出每一个按钮的文本
         for (var i=0;i<$("button.btn").length;i++){
            console.log($("button.btn").eq(i).html());
        }
       //获取value值
       <input type="text" value="123">
       console.log($("input").val());
       //设置value值
       $("input").val("321");//要带""
       //添加类名称
       $("input").addClass("txt txt1");
       //移除类名称
       $("input").removeClass("txt");
       //类别的切换 如果有的话删去 没有的话加上
       $("input").toggleClass("txt");
       //设置id值
       $("input").attr("id","user");
       //获取id值
       console.log($("input").attr("id"));
       //自定义属性 data-user=maodou
       $("input").attr("data-user","maodou");
       //移除
       $("input").removeAttr("id");
       //一次设置多个属性
       $("input").attr({
            id:"username",
            "data-list":"list",
        })
        //复选框 后面有checked的显示打勾
        <input type="checkbox" checked>篮球
        <input type="checkbox">足球
        <input type="checkbox">棒球
         console.log($("input[type=checkbox]").prop("checked"));
         //全部改为true
        $("input[type=checkbox]").prop("checked",true);
        

prop() 方法设置或返回被选元素的属性和值。
siblings() 方法返回被选元素的所有同级元素。
★☆自执行函数
写法①:(函数)(实参)
写法②:(函数(实参))

// 下面2个括弧()都会立即执行
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值