jQuery操作DOM

 

 

---

JQuery是原自JS的一个升级封装一个库

 

JS：行内  内部  外部

---

Jquery如何表示加载时间？
$();

<script>
//Jquery如何表示加载时间？
    $(function (){
        //加载时间触发的内容
        alert("Hello")
    });
</script>

---

jquery如何操作元素以及让元素做什么事情
$(选择器).事件();

    <h2 id="ss">哈哈</h2>
    <h1>哈哈</h1>
<script>
    //jquery如何操作元素以及让元素做什么事情
//$(选择器).事件();
 $("h2,h1").html("新的内容")
</script>

隐藏hide();

<h1>今日新闻</h1>
<h3>一男子因分手暴饮暴食</h3>//隐藏
<script>
$(function (){
    $("h3").hide();
}){

}
</script>

---

过滤选择器：

隔一个:

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<script>
    $(function (){
        //隔一个
       $("li:even").html("收到")
    });
</script>

样式:

---

选择器：

---

通过特定的过滤规则来筛选出所需的元素

主要分类

基本过滤选择器

内容过滤选择器

可见性过滤选择器

子元素过滤选择器

属性选择器

表单选择器

 

---

        改变前三个:$("li:lt(3)").css("color","red")

 

 选择class中a开头的$('li[class^="a"]').css("color","red")

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li class="a">第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<script>
    $(function (){
        //隔一个
       $('li[class^="a"]').css("color","red")
    });
</script>

---

属性选择器通过HTML元素的属性来选择元素 

---

注意：

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突