前端小白笔记-jQurey语法

前记:
最近学安卓遇到了不少关于前端中的语法元素,所以又来总结一波前端
参考https://www.runoob.com/jquery/jquery-examples.html

1.选择器
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});

$(this).hide()隐藏当前的HTML元素
$("p").hide()隐藏所有的<p>元素
$(".test").hide()隐藏所有的class="test"的元素
$("#test").hide()隐藏id="test"的元素

2.点击事件:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

click()点击事件
dbclick()双击事件
mouseenter()鼠标滑到
mouseleave()鼠标划走
focus() 和 blur()得到焦点和失去焦点时的操作

$("p").show(); 显示所有的<p>元素
toggle();在隐藏和显示之间切换
hide("slow")隐藏速度变慢
$(.ex .hide).click()在class为ex的下的class为hide的控件的点击事件

3.淡入淡出:
代码示例:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn(1500);
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

$("#div1").fadeOut();淡出,到了无色的时候会自动弹出界面
$("#div1").fadeToggle();淡出之后又淡入
$("#div1").fadeTo("slow",0.15);淡到原来的百分之多少

点击弹出再次点击收回:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
#panel,#flip
{
   padding:5px;
   text-align:center;
   background-color:#e5eecc;
   border:solid 1px #c3c3c3;
}
#panel
{

padding:100px;
display:none;
}
</style>
</head>
<body>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

动画:
1.向右移动500像素,注意position要设置为relative, fixed, 或 absolute,否则无法移动
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'500px'});
});
});
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
2.同时设置多个属性的改变:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

3.也可以直接从原来的值上加
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});

4. height:'toggle'
高度变为0点击又变回,和width='toggle'不能同时存在

5.可以把某个控件作为一个变量,这样可以避免每次都写得麻烦
var div=$("div");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"fast");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"fast");
6.修改字体大小
div.animate({fontSize:'3em'},"slow");
7.在滑动的过程中也可以停止
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});

8.停止的3种区别(比如说有两个animate)
第一种会停掉第一个,立马去做第二个
第二种会两个都停
第三个会立马完成当前的animate,然后停下
$("#stop").click(function(){
$("div").stop();
});

$("#stop2").click(function(){
$("div").stop(true);
});

$("#stop3").click(function(){
$("div").stop(true,true);
});

获取内容:
1.获取id为test的文本内容
alert("Text: " + $("#test").text());
2.获取到并转为html格式
alert("HTML: " + $("#test").html());
3.获取到id为test中的value值
alert("值为: " + $("#test").val());
<input type="text" id="test" value="菜鸟教程">
4.显示href属性的值
alert($("#runoob").attr("href"));
<a href="//www.runoob.com" id="runoob">菜鸟教程</a>

修改内容:
1.修改text,html,val
$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");
2.回调函数
当有i参数时,内容会不断增长
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
如果没有i
返回的内容不变
3.修改href的内容
$("#runoob").attr("href","http://www.runoob.com/jquery");
<a href="//www.runoob.com" id="runoob">菜鸟教程</a>
4.一个控件的参数可以自己定义,自己添加(jjj是新加的)
<a href="//www.runoob.com" id="runoob" jjj="123">菜鸟教程</a>
然后可以通过attr去修改它
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"jjj" : "jQuery 教程"
});
   // 通过修改的 title 值来修改链接名称
   jjj = $("#runoob").attr('jjj');
   $("#runoob").html(jjj);
5.这里就是回调函数点击一次加一个/jquery
$("#runoob").attr("href", function(i, origValue){
return origValue + "/jquery";
});

增加内容:
1.默认在尾部新增
$("p").append(" <b>追加文本</b>。");
$("ol").append("<li>追加列表项</li>");

2.在开头新增
$("p").prepend("<b>在开头追加文本</b>。 ");
$("ol").prepend("<li>在开头添加列表项</li>");

3.新建文本的三种方式:
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); // 追加新元素

4.在..之前插入
$("img").before("<b>之前</b>");

5.在..之后插入
$("img").after("<b>之前</b>");

这里会有疑问,我把after改成append不可行是为什么?JQuery中append()和after()的区别？
上网一查,append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。所以文字无法插到图片之中,所以只能用after();

移除内容:
1.把整个内容(包括背景都移除)
$("#div1").remove();
2.(把内容清空,背景还在)
$("#div1").empty();
3.移除指定的几个元素
$("p").remove(".italic");

给内容设置css类:
1.给不同的元素设置属性
$("h1,h2,p").addClass("blue");
$("div").addClass("important");

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

2.同时添加多个属性
$("#div1").addClass("important blue");

3.同时移除多个属性
$("#p2").removeClass("important blue");

4.不断切换属性
$("h1,h2,p").toggleClass("blue");

返回和设置css方法
1.获取id为p1的背景颜色
alert("背景颜色 = " + $("#p1").css("background-color"));

2.设置css
$("p").css("background-color","blue");

3.为元素设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});

获取尺寸信息:(</br>是换行)
1.获取宽度和高度
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);

2.包含内边距
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();

3.包含内边距和边框
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();

4.返回窗口和文档的宽度和高度
<div id="div1" style="background-color:lightblue; width:300px; height:200px;">
var txt="";
txt+="文档 width/height: " + $(document).width();
txt+="x" + $(document).height() + "</br>";
txt+="窗口 width/height: " + $(window).width();
txt+="x" + $(window).height();
$("#div1").html(txt);

5.设置控件大小
$("#div1").width(500).height(500);

将控件的祖先设置属性
1.包含一层的叫父元素,再往上是祖父元素,曾祖父元素,曾曾祖父元素
$("span").parent().css({"color":"red","border": "2px solid red"});
2.给所有的祖先都设置属性
$("span").parents().css({"color":"red","border":"2px solid red"});
3.给两个控件之间的所有祖先元素设置
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

将控件的后代元素设置属性:
1.给一个孩子设置元素(似乎只能给一个,因为children本就是复数,所以不可能有childrens)
$("div").children().css({"color":"red","border":"2px solid red"});
2.如果想给后代中的某一个上属性
$("div").find("#p1").css({"color":"red","border":"2px solid red"});

给控件的同胞设置属性
1.除它自己之外的所有同胞
$("h2").siblings().css({"color":"red","border":"2px solid red"});
2.它的下一个同胞
$("h2").next().css({"color":"red","border":"2px solid red"});
3.它之后的所有同胞
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
4.他之后的某些同胞
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

jQuery AJAX load() 方法
1.载入文本内容
$("#div1").load("/try/ajax/demo_test.txt");
2.获取文本中指定内容
$("#div1").load("/try/ajax/demo_test.txt #p1");
3.使用回调函数
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});

jQuery AJAX get() 和 post() 方法
1.get()状态
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});

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

今天也要努力鸭★

发布了69 篇原创文章 · 获赞 50 · 访问量 5万+

私信关注

前端小白笔记-jQurey语法

猜你喜欢