初始JQuery03

JQuery
本文总阅读量:
  1. 1. RadioButton|checkbox
  2. 2. 一些事件
  3. 3. 事件冒泡
  4. 4. 重写移动图片案例
  5. 5. jQuery的事件对象：event对象
  6. 6. jquery animate
  7. 7. cookie

RadioButton|checkbox

1
2
3
<input id="Radio2" checked="checked" name="gender" type="radio" value="男" />男
<input id="Radio1" checked="checked" name="gender" type="radio" value="女" />女
<input id="Radio3"checked="checked" name="gender" type="radio" value="未知" />未知
如何取选中的值

1
$("input[name=gender]:checked").val()

设置RadioButton的选中值

1
.attr(‘checked’,true);

$("input[name=gender]").val(["女"]);也可以直接设置，注意val中参数的[]不能省略,val()的参数必须是一个数组。

RadioButton的选择技巧对于CheckBox和Select列表框也适用

1
2
$(‘#selOne’).val([‘1’,’2’,’3’]);//同时设置多个下拉菜单选中
$("#btn1").attr("checked",true)

实现全选部不选

1
2
3
4
5
6
$("#btn1").click(function () {
        $("input:checkbox").prop("checked",true);
    });
    $("#btn2").click(function () {
        $("input:checkbox").prop({ checked: false });
    });

一些事件

$("#btn").bind("click",function(){})事件绑定

hover(entern,leavefn)当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。相当于mouseover与mouseout事件的结合。

$('#bt').toggle(funtion) 相互切换

事件冒泡

事件冒泡：jQuery中也像JavaScript一样是事件冒泡window.event.cancelBubble=true,ie取消

如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，

e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。

e. stopPropagation();
标准js方式：e.stopPropagation();
IE下：e.cancelBubble = true；

1
2
3
4
$("tr").click(function(e) { 
	alert("tr被点击"); 
	e.stopPropagation(); 
});//注意函数的参数是e

重写移动图片案例

1
2
3
4
5
6
7
8
9
10
11
<body>
    <img src="office.jpg" />
</body>
</html>
<script>
    $(function() {
        $(document).mousemove(function(e) {
            $("img").offset({ left: e.pageX, top: e.pageY });
        });
    });
</script>

jQuery的事件对象：event对象

  • 属性：pageX、pageY、target(指事件源)
  • e.which如果是鼠标事件获得按键（1左键，2中键，3右键）
  • keydown则获取的是keyCode
  • unbind()方法即可移除元素上所有绑定的事件，如果unbind(“click”)则只移除click事件的绑定。bind:+=；unbind:-=
  • one()方法进行事件绑定,值执行一次

jquery animate

show()、hide()方法会显示、隐藏元素。用toggle(speed)方法在显示、隐藏之间切换

滑动效果
slideDown()、slideUp()、slideToggle()隐藏就显示,显示就隐藏

淡入淡出（透明）
fadeIn()、fadeOut()、fadeToggle()同上、fadeTo()到达透明度多少2000，0.1

自定义动画
animate({样式},speed)
部分样式不支持：backgroundColor、color、borderStyle、……
使用animate设置对象位置的时候要确保position的值为absolute或relative.
停止动画正在执行动画的元素.stop()(*),带参数的stop(true,false);

1
2
3
4
$(function () {
            $('#im').animate({ 'height': '20px', 'width': '20px', 'left': '10px', 'top': '500px' }, 3000).animate({ 'height': '+=200px', 'width': '+=200px', 'left': '500px', 'top': '50px' }, 2000);
        });
$(`#im`).stop(true);//带参数继续当前动画,后面动画清空

什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery特有的概念，只不过jQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。

Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不能使用了，不过一般不用考虑禁用Cookie的情况。Cookie的几个特征：Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突；一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie；Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。

jQueryfoundation jsfoundation
prev： next：