JQuery笔记

jQuery可以对任意元素做点击操作click

<img id= "headPic" src="#"><input id="upload" accept="image/*" type="file" style="display: none"/>对图片进行点击，实则是input的$(function() {    $("#headPic").click(function () {        $("#upload").click();             }        });});

1、jQuery 语法

jQuery 语法是通过选取HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()举例：$(this).hide() - 隐藏当前元素selector：jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

2、jQuery 效果

1. 显示隐藏

1. $("p").hide();2. $("p").show();3.  $("button").click(function(){    $("p").toggle();    });//可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：实例

1. 动画

$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。$("button").click(function(){  $("div").animate({left:'250px'},5000);});   //5s完成动作向右移250px可以有多个属性，操作所有 CSS 属性 $("div").animate({      left:'250px',      opacity:'0.5',      height:'150px',      width:'150px'    });

1. 淡入淡出

jQuery 拥有下面四种 fade 方法：fadeIn(speed,callback) //用于淡入已隐藏的元素,参数都可选fadeOut() //用于淡出可见元素fadeToggle() //用于淡入淡出切换fadeTo(speed,opacity,callback)  //允许渐变为给定的不透明度（值介于 0 与 1 之间）,前两个参数必须

1. callback

这个参数是为了在动画100%执行后，执行function

3、捕获和设置属性值

text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值attr() - 设置或返回链接的值回调函数：function(i,origText)回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 $("#test1").text(function(i,origText){        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";     });

举例一：<p id="test1">这是一个段落。</p> $("#btn1").click(function(){    $("#test").text() //获得值    $("#test1").text("Hello world!");//设置值  }); 点击btn1的结果:Hello world! 举例二： attr() 改变（设置）链接中 href 属性的值 $(document).ready(function(){  $("button").click(function(){    alert($("#runoob").attr("href"));//显示    $("#runoob").attr("href","http://www.runoob.com/jquery");//设置  });});<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>

4、empty和remove的区别

 $("button").click(function(){    $("#div1").remove();  });  <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">  remove()会删除被选元素及其子元素，将整个div消掉  empty()只会删除div的子元素，div仍旧在。

5、jqury对css的增加和删除

参数是css的类名addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性$("p").css("background-color");//返回背景颜色rgb$("p").css("background-color","yellow");//设置背景颜色