jQuery(下)

简介: jQuery(下)

3.jQueryHTML

jQuery DOM操作:定义访问HTML和XML文档的标准

text():设置或返回所选元素的文本内容

html():设置或返回所选元素的内容(包含HTML标签)

val() 设置或返回表单字段的值

    <script>
       $(document).ready(function() {
            $("#btn1").click(function(){
                alert("Text:"+$("#test").text());
            });
            $("#btn2").click(function(){
                alert("HTML:"+$("#test").html());
            });
       });
    </script>

9da28931761a41f0836f44572168add9.png


3.1 元素的增删改查

jQuery append() 增 在被元素的结尾插入内容:/ addclass() 为元素添加class属性

$("p").append(“在元素结尾追加文本”)
$("button").click(function(){  //为结果字体变色加租
  $("h1,h2,p").addclass("blue");
  $("div").addclass("important");
  });


jQuery prepend()方法在被选元素的开头插入内容

$("p").prepend(“在开头追加文本”);


jQuery after()和before()方法是在被选元素之后和之前插入内容

$("img").after(“在后面添加文本”);
$("img").before("在前面添加文本·")
//添加多个内容
function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}


jQuery remove() 删除被选元素及其子元素 // removeClass 方法 删除指定的class属性

$("#div1").remove();
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});


jQuery empty() 删除被选元素的子元素

jQuery toggleClass()方法 切换元素的类的属性

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});


3.2 css类及方法

设置或者返回被选元素的一个或者多个样式属性

例子:设置css属性
$("p").css("background-color");
例子:设置多个css属性
$("p").css({"background-color","yeelow","font-size","200%"})


4.jQuery遍历

4.1 遍历 / 父辈

向上遍历DOM树:parent(),parents(),parentsUntil() 用于向上遍历

parent() 返回被选元素的直接父元素

parents() 返回被选元素的直接父元素

parentsUntil() 返回介于两个给定元素之间的所有祖先元素

   举例:
    <script>
        $(document).ready(function(){
           $("span").parent().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<style>
    .ancestors *
    {
     display: block;
        border:2px solid lightgrey;
        color:lightgray;
        padding:5px;
        margin:15px;
    }
</style>


效果图:

5a45d3b3ce6142bf83fa5dd724b7c814.png


4.2 后代同胞过滤

后代:

向下遍历DOM树:children() ,find()方法

children()方法 返回被选元素的所有直接子元素

find()方法:返回被选元素的后的元素,一路向下直到最后一个后代

$(doucment).ready(function(){
  $("div").children();
});
$(document).ready(function(){
  $("div").find();
})


同胞:

在DOM树中水平遍历

siblings() 返回所有同胞元素

next() 返回下一个同胞元素

nextAll() 返回所有跟随的同胞元素

nextUntil() 返回两个参数之间所有的同胞元素

prev(),prevAll(),prevUntil方法 方向与上面相反


过滤:

缩小搜索元素的范围:first(),last(),eq()

first() 返回被选元素的首个元素

last() 返回被选元素的最后一个元素

eq() 返回带有指定索引号的元素 索引从0开始,


5.jQueryAjax

5.1 load() 、get()、post()方法

load()从服务器中加载数据,并把返回的数据放入被选元素中

get() 从指定的资源请求数据

post() 向指定的资源提交要处理的数据

get()和post()方法的区别在于:get()方法可能返回缓存数据,post()不会缓存数据,并且常用于连连同请求一起发送数据

相关文章
|
2月前
|
JavaScript API 数据安全/隐私保护
jQuery Prettydate
jQuery Prettydate
30 2
|
缓存 JavaScript 前端开发
jQuery
jQuery 语法 jQuery 选择器
104 0
|
7月前
|
JavaScript 前端开发
什么是jQuery?
什么是jQuery?
|
7月前
|
SQL JavaScript 前端开发
|
机器学习/深度学习 存储 JSON
Jquery
介绍Jquery
|
JavaScript CDN
|
JavaScript
jquery 的使用
jquery 的使用
73 0
|
JavaScript
JQuery
JQuery
103 0
|
Java
2019 年了,为什么我还在用 jQuery?
许多人都在提倡: “直接用原生的 JavaScript 就好了,不需要 jQuery 了”。
1154 0
|
Web App开发 JSON JavaScript