了解简单的JQ

qq_40055200

于 2021-03-03 15:06:01 发布

阅读量163

点赞数 2

本文链接：https://blog.csdn.net/qq_40055200/article/details/114299386

版权

最近接触了一个有点历史的项目JQ

挺烦的不过呢也学到点JQ简单的语法

记录一下学习到的语法

JQ操作DOM

$(selector).action()

美元符号定义JQ
选择符（selector）"查询"HTML元素
JQ的action就是操作dom

1.$(this).hide()-隐藏当前元素
2.$("p").hide()-隐藏所有段落
3.$(".test").hide()-隐藏所有class="test"的所有元素
4.$("#test").hide()-隐藏所有id="test"的所有元素

在文档加载后激活函数:为了防止文档在完全加载（就绪）之前运行 jQuery 代码

$(document).ready(function(){})

JQ元素选择器

JQ使用css选择器来选取HTML元素。
$("p")选取<p>元素
$("p.intro")选取所有class="intro"的元素
$("p#demo")选取所有id="demo"的<p>元素

JQ属性选择器

$("[href]")选取所有带有href属性的元素。
$("[href = '#']")选取所有带有href值等于'#'的元素
$("[href!='#']")选取所有带有href值不等于“#”的元素
$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素

语法	描述
$(this)	当前HTML元素
$("p")	所有p元素
$("p.into")	所有class="into"的p元素
$("#into")	所有id="into"的元素
$("ul li:first")	每个<ul>的第一个<li>元素
$("[href$='.jpg']")	所有带有以“.jpg"结尾的属性值的href属性
$("div#intro .head")	id="intro"的<div>元素中所有class="head"的元素

JQ函数事件

事件处理程序指的是当HTML中发生某些事件时调用的方法。

// 点击按钮事件

$("button").click(function(){})

// 隐藏所有p元素

$("p").hide();

Event函数	绑定函数至
$(selector).ready(function())	函数初始化
$(selector).click(function())	点击事件
$(selector).dbclick(function())	双击事件
$(selector).focus(function())	聚焦事件
$(selector).mouseover(function())	鼠标悬浮事件

JQ显示和隐藏

JQ hide()和show()

$("p").hide();
$("p").show();

JQ toggle()切换

$("button").click(function(){
  $("p").toggle();
});

JQ淡入淡出

JQ fadeIn()方法用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
JQ fadeIn()方法用于淡出可见元素
$(selector).fadeOut(speed,callback);
fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).fadeTo(speed,opacity,callback);

JQ滑动

// 向下滑动元素
$(selector).slideDown(speed,callback)
// 向上滑动
$(selector).slideUp(speed,callback)
// 向上滑动和向下滑动之间切换
$(selector).slideToggle(speed,callback)

JQ动画

//animate()方法允创建自定义动画
$(selector).animate({params},speed,callback);
// 操作一个属性
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left:'250px'})
    })
})
// 多个属性
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        })
    })
})

停止动画

JQ stop()滑动
$(selector).stop(stopAll,goToEnd);

Chaining允许我们在一条语句中用多个JQ方法

$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color":"red").slideUp(2000).slideDown(2000)
    })
})

JQ HTML

获取内容 -text(),html()以及val()

text() -设置或返回所选元素的文本内容
html() -设置或返回所选元素的内容
val() -设置或返回表单字段的值


//实例
$(document).ready(function(){
    $("#btn1").click(function(){
        alter("Text" + $("#test").text());
    })
    $("#btn2").click(function(){
        alter("Text" + $("#test").html());
    })
})

$(document).ready(function(){
    $("#button").click(function(){
        alter("value"+$("#test").val())
    })
})

获取属性-attr()

JQ attr()方法用于获取属性值

//一个
$(document).ready(function(){
    $("button").click(function(){
        alert($("#w3s").attr("href"))
    })
})
// 多个
$("button").click(funciton(){
    $("#w3s").attr({
        "href":"http://www.w3school.com.cn/jquery",
        "title": "W3School jQuery Tutorial"
    })
})

添加新的HTML内容

append()-在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after() -在被选元素之后插入内容
before() -在被选元素之前内容

$(document).ready(function(){
    $("#btn").click(function(){
        $("p").append("<b>Appended item</b>")
    })
   $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
})

JQ删除元素

remove() -删除被选元素
empty() -从被选元素中删除子元素

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").remove()
    })
})

过滤被删除的元素、

$("p").remove(".italic")

JQ操作css

addClass() -向被选元素添加一个或多个类
remove() -从被选元素删除一个或多个类
toggleClass() -对被选元素进行添加/删除类的切换操作
css() -设置或返回样式属性
removeClass() -删除指定class的属性
innerWidth()返回元素的宽度（内边距）
innerHeight()返回元素的高度（内边距）
outerWidth()返回元素的宽度（内边距和边框）
outerHeight()返回元素的高度（内边距和边框）
width():浏览器的宽度
height():浏览器的高度

向上遍历DOM树

parent():被选元素直接的父元素
parents()：被选元素的所有祖先元素，一直到文档的根元素
parentsUntil()：返回介于两个给定元素之间的所有祖先元素

// 父元素
<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});



<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});



<body class="ancestors"> body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

JQ后代：子，孙，曾孙

child():方法返回被选元素的所有子元素
find()：方法返回被选元素的后代元素，一路向下直到最后一个后代

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (子)
    <span>span (孙)</span>     
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p> 
</div>

$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});

JQ同胞

DOM树中水平遍历