jquery点击事件，jquery点击显示再次点击隐藏
各位老铁们好，相信很多人对jquery点击事件都不是特别的了解，因此呢，今天就来为大家分享下关于jquery点击事件以及jquery点击显示再次点击隐藏的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
jquery中有哪些基础事件方法
jquery基础事件，包括绑定事件、简写事件、复合事件；
一．绑定事件
jQuery通过.bind()方法来为元素绑定这些事件。
形式：
bind(type, [data], fn)
参数：
type表示一个或多个类型的事件名字符串；
[data]是可选的，作为 event.data属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；
fn表示绑定到指定元素的处理函数。
二、简写事件
为了使开发者更加方便的绑定事件，jQuery封装了常用的事件以便节约更多的代码。称之为简写事件。简写事件，绑定方法如下图，
三、复合事件
jQuery提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等。
扩展资料
1、绑定事件fn函数
1)使用点击事件
$('input').bind('click', function(){//点击按钮后执行匿名函数
alert('点击！');
});
2)普通处理函数
$('input').bind('click', fn);//执行普通函数式无须圆括号
function fn(){
alert('点击！');
}
2、简写事件函数
1）.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。
2）.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。
3）.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。
3、复合事件示例，背景移入移出切换效果
$('div').hover(function(){
$(this).css('background','black');//mouseenter效果
}, function(){
$(this).css('background','red');//mouseleave效果，可省略
});
参考资料
jQuery官方网站-事件
jQuery 绑定并实现单击事件
实现的方法如下：
1、第一步，创建一个新的html文件，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，创建输入框和按钮，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，预览效果见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，需要引入jquery.js，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，设置输入框的keydown事件与click事件，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，按钮单击触发事件，见下图，转到下面的步骤。
7、第七步，执行完上面的操作之后，单击按钮，效果见下图。这样，就解决了这个问题了。
jquery点击一个事件更换图片,在点击更换回来
这是你现在的结构；建议星星图标可以用作背景图片；
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<scripttype="text/javascript"src=""></script>
</head>
<body>
<style>
*{margin:0;padding:0;}
ul.stars{display:block;margin:100px100px30px;overflow:hidden;}
ul.starsli{display:block;float:left;padding:04px;cursor:pointer;}
ul.starsliimg{display:block;width:30px;height:30px;}
ul.starsliimg.full{display:none;}
ul.starsli.onimg.empty{display:none;}
ul.starsli.onimg.full{display:block;}
</style>
<script>
$(document).ready(function(e){
$("ul.starsli").click(function(){
$(this).toggleClass("on");
varstars=$("ul.stars").find("li.on").size();
$("input#stars").val(stars);
});
});
</script>
<formmethod="get">
<ulclass="stars">
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
<li>
<imgclass="empty"src=""/>
<imgclass="full"src=""/>
</li>
</ul>
<inputtype="hidden"id="stars"name="stars"/>
<inputtype="submit"value="提交"style="margin:0100px;">
</form>
</body>
</html>最好的方式是把图片处理一下作为ul的背景图，通过点击li获取索引值来改变ul的背景图片位置；不能上传附件了。。还是上代码吧。。
<!DOCTYPEHTML>
<html>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<title>评价</title>
<scripttype="text/javascript"src=""></script>
<script>
$(document).ready(function(){
//星级评分
$("formpspan.radiolabel.radio").click(function(){
$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
});
});
</script>
<style>
*{margin:0;padding:0;}
formp{display:block;overflow:hidden;padding:10px20px;}
formplabel{display:block;height:36px;line-height:36px;color:#444;font-size:14px;float:left;}
formpspan.radio{display:block;width:150px;height:19px;background:url(stars.png)left0pxno-repeat;float:left;margin:8px00;}
formpinput.radio{display:none;}
formplabel.radio{width:20%;height:100%;margin:0;cursor:pointer;}
forminput.btn{display:block;width:210px;height:36px;line-height:36px;*line-height:normal;color:#fff;font-size:15px;background:#ffb81f;border:0;border-radius:6px;cursor:pointer;float:left;margin-top:10px;}
</style>
<body>
<form>
<p>
<label>服务态度：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star1"value="0"checked/>
<labelclass="radio"for="star11"></label>
<labelclass="radio"for="star12"></label>
<labelclass="radio"for="star13"></label>
<labelclass="radio"for="star14"></label>
<labelclass="radio"for="star15"></label>
<inputid="star11"class="radio"type="radio"name="star1"value="1"/>
<inputid="star12"class="radio"type="radio"name="star1"value="2"/>
<inputid="star13"class="radio"type="radio"name="star1"value="3"/>
<inputid="star14"class="radio"type="radio"name="star1"value="4"/>
<inputid="star15"class="radio"type="radio"name="star1"value="5"/>
</span>
</p>
<p>
<label>运输速度：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star2"value="0"checked/>
<labelclass="radio"for="star21"></label>
<labelclass="radio"for="star22"></label>
<labelclass="radio"for="star23"></label>
<labelclass="radio"for="star24"></label>
<labelclass="radio"for="star25"></label>
<inputid="star21"class="radio"type="radio"name="star2"value="1"/>
<inputid="star22"class="radio"type="radio"name="star2"value="2"/>
<inputid="star23"class="radio"type="radio"name="star2"value="3"/>
<inputid="star24"class="radio"type="radio"name="star2"value="4"/>
<inputid="star25"class="radio"type="radio"name="star2"value="5"/>
</span>
</p>
<p>
<label>货款发放：</label>
<spanclass="radio">
<inputclass="radio"type="radio"name="star3"value="0"checked/>
<labelclass="radio"for="star31"></label>
<labelclass="radio"for="star32"></label>
<labelclass="radio"for="star33"></label>
<labelclass="radio"for="star34"></label>
<labelclass="radio"for="star35"></label>
<inputid="star31"class="radio"type="radio"name="star3"value="1"/>
<inputid="star32"class="radio"type="radio"name="star3"value="2"/>
<inputid="star33"class="radio"type="radio"name="star3"value="3"/>
<inputid="star34"class="radio"type="radio"name="star3"value="4"/>
<inputid="star35"class="radio"type="radio"name="star3"value="5"/>
</span>
</p>
<p>
<inputclass="btn"type="submit"value="提交"/>
</p>
</form>
</body>
</html>附上图片素材
OK，关于jquery点击事件和jquery点击显示再次点击隐藏的内容到此结束了，希望对大家有所帮助。