jQuery语法梳理1

前端开发 简书

初学jquery需要注意的几点:

1.通过JQ获取到的元素是JQ对象,通过元素的document.getXXX获取到的元素是原生对象

2.原生对象不能调用JQ的方法和属性

3.JQ对象不能调用原生对象的方法和属性

JQ对象和原生对象可以相互转换:

1.原生对象如何转JQ对象

var content = document.getElementsByClassName("content")[0];
    $(content).css("color","red");

2.JQ对象如何转原生对象

// JQ对象[0]
// JQ对象.get(0)
    $(".content")[0].innerHTML = "显示";
    $(".content").get(0).innerHTML = "显示2";

常用的语法

1.获取元素 ($(“”) 里面放字符串-选择器)

类名:$(“.item”),标签名:$(“div”),输入框的类型:$(“input[type=radio]”),筛选类名不是item的div:$(“div:not(.item)”)。。。

2.创建元素,添加元素,删除元素

  1. .append和appendTo 节点子级最前面插入
  2. .prepend 和 prependTo 节点子级最后插入
  3. .after和.insertAfter 节点(同级)后面插入
  4. .wrap给节点包裹一个父级
  5. .unwrap去掉父级
  6. .wrapInner 给标签的内容加标签
    区别看下列:
// 1.创建标签
$("

创建p标签

") // 2.添加元素 // 给p插入一个子级span $("p").append($("span")) // 把span插入p里面 $("span").appendTo($("p"))

3.修改/获取css样式

// 获取样式
    console.log($(".content").css("color"));
    // 筛选下标为1的p标签
    console.log($("p").eq(1).css("color"));
// 设置样式
    // 设置样式第一种方式
    $("p").css("color","pink");
    // 设置样式第二种方式
    $("p").css({
        color:"green",
        border: "1px solid red"
    })
    // 设置样式第三种方式
    var cArr = ["black","green","blue","gray","purple","gold"];
    $("P:first").css("color",function(index,oldValue){
        return cArr[index];
    })
    $("p").css({
        width:function(index,oldValue){
            return 100 * (index + 1);
        },
        height:function(){
            return "50px";
            // return this.offsetWidth * 0.5;
        }
    })

JQ的属性和方法

1.document.ready: 和window.onload类似,都是文档加载完毕之后执行。不同点在于document.ready可以绑定多个事件.

// 三种写法
$(document).ready(function(){
    console.log("文档加载完毕");
})
$(document).ready(function(){
    console.log("文档加载完毕2");
})
// 简化版写法。最常用的写法
$(function(){
    console.log("文档加载完毕3")
})
  1. 移交$的使用权

    正常情况下$就代表是jQuery.如果和其他变量名有冲突,JQ可以把$的使用权交出去。

// 调用此方法以后,就不能继续使用$来代表JQ
// 用变量接收返回值之后,这个变量就代表JQ
var $$ = $.noConflict();

3.常用的jQ事件

DC5FA0E5-1063-4153-A958-C4406A82EA34.png

4.属性的获取

$(":button").click(function(){
        // 获取属性
        // attr一般用于获取去/设置自定义属性
        // prop一般用于获取自带属性
        // 获取src的时候,prop是绝对路径
        console.log($(":checkbox").attr("checked"));
        // 获取系统自带的属性可以使用prop
        console.log($(":checkbox").prop("checked"));
        // 设置属性
        $(":checkbox").attr("checked",true);
        console.log($(":button").prop("index"));
        console.log($(":button").attr("index"));

        // $(".box").addClass("box");
        // 添加,移出,切换类名
        $(".box").toggleClass("box1");
    })

5.标签内容

.html 元素内容 相当于innerHTML

.text 元素内容

.val 文本框的值 相当于js的value

  1. 效果
    1.自定义动画 .animate()
    2.隐藏 .hide()
    3.淡入 用于隐藏元素 .fadeIn()
  2. 淡出 .fadeOut()
    5.淡入状态时为淡出,反之为淡入 .fadeToggle()
  3. 向上滑动 .slideUp()
    7.向下滑动 .slideDown()
    8.停止未执行的动画 .clearQueue()
简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » jQuery语法梳理1

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录