jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

jcsyl_mshot

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jcsyl_mshot/article/details/81487186

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍jQuery的基础用法，包括选择器、事件处理、内容与属性操作等。并详细讲解了如何利用jQuery简化DOM操作，实现元素的增删查改及响应各种用户事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础语法 ${selecttor}.action()

所有的jQuery函数位于一个document ready 函数中

$(document).ready(function(){
    //jquery 代码。
});

jQuery 选择器

1.元素选择器
$(“p”) 在页面中选择所有< p>”元素。

$(document).ready(funcion(){
            $("button").click(funcion(){
            $("p").hide();
                              });
                  });

2.id 选择器
$(“#test”)在页面中选择Id 为 test 的元素。

3..class 选择器
$(“.text”) 选择所有class=”text”的元素。

JQuery

鼠标事件	键盘事件	表单事件	文档窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseEnter	keyup	focus	scroll
mouseLeave		blur	unload

mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件。

mouseleave() 当鼠标离开元素时，会发生 mouseleave事件。

mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生

focus() 当元素获得焦点时，会发生focus事件。

Blur()当元素失去焦点时，会发生blur事件。

jQuery 获取内容和属性

三个用于dom操作的jQuery方法
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括HTML标记）
val() 设置或返回表单字段的值
attr()方法用于获取属性值

</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#a").attr("href"));
  });
});
</script>


<body>
<p><a href="http://www.222.com" id="a">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
// 显示 http://www.222.com

jQuery 设置内容和属性

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery attr() 方法也用于设置/改变属性值。

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

jQuery 添加元素

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

jQuery 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery 操作css

.important
{
        font-weight:bold;
        font-size:xx-large;
}

.blue
{
        color:blue;
}

addclass()方法添加css样式。
removeClass（）方法删除css 属性

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

jQuery 遍历

指根据其他元素的关系来查找HTML元素

向上遍历DOM树

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

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

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

$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍历DOM 树

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

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

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

jquery AJAX

jquery load() 方法 $(selector).load(URL,data,callback);
load方法从服务器加载数据，并把返回的数据放入到被选的元素中。必须的URL 参数规定希望加载的URL。可选的data参数规定与请求一同发送的查询字符串键值对集合。可选的callback参数是load()方法完成后所执行的函数名称。
回调函数的参数可以设置不同的参数

Responsetxt 包含调用成功时的结果内容

statusTXT 包含调用的状态

xhr 包含XMLHttpRequest对象。

get() 方法和post() 方法
get() 和post() 请求从服务器请求数据

$.get(URL,callback);
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});