我的jQuery

最新推荐文章于 2022-09-07 21:14:29 发布

JIuzhe_

最新推荐文章于 2022-09-07 21:14:29 发布

阅读量1k

点赞数

分类专栏：自学JS 文章标签： jquery

本文链接：https://blog.csdn.net/JIuzhe_/article/details/54865870

版权

自学JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先感谢菜鸟教程提供的帮助
jQuery是一个js库
使用jQuery需要在script标签里面设置src
可以是本地地址也可以是网络地址CDN
常用

//百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

基本语法

$(“selecor”)就是获取那个元素的属性相当于
document.getElementBy…
\$(selecor).action()
\$定义为jQuery
selecor 为HTML的指定元素this id class…
还有很多语法点击更多
action为执行操作
$(“p.test”).hide() - 隐藏所有 class=”test” 的 < p>元素如果写成.test 就没有< p>的限制条件了

文档就绪事件
在文档加载完成之后启动代码

$(document).ready(function(){

   // 开始写 jQuery 代码...
   $("button").click(function(){
    $("p").hide()
}
)

});
或者
$(function(){
    //内容
})

事件概要
click()点击事件
dblclick()双击事件
mouseenter()鼠标进入元素区域事件
mouseleave()鼠标离开事件
mousedown()鼠标按下事件
mouseup()鼠标松开事件
hover()鼠标进入和离开各触发一个事件,,,
focus()选中目标时发生事件
blur()选中后离开触发事件

调用内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});
$("button").click(function(){
  alert($("#JIuzhe").attr("href"));
});

修改内容

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

添加字段的三种方式

function appendText(){
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

未完待续…

JIuzhe_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的jQuery

首先感谢菜鸟教程提供的帮助 jQuery是一个js库使用jQuery需要在script标签里面设置src 可以是本地地址也可以是网络地址CDN 常用//百度CDN<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>基本语法$(“selecor”)就是获取
复制链接

扫一扫