JQuery学习笔记2

本文详细解析了JavaScript中节点操作与样式管理的相关知识,包括如何替换节点、包裹节点,以及如何获取、设置、追加、移除、切换样式,并通过实例展示了IECollection、RadioButton、CheckBox操作和JQuery事件的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

十八、节点操作
1、替换节点 将<br/>替换为<hr/>
$("br").replaceWith("<hr/>");
2、包裹节点 将粗体用红色包裹起来,再用用粗体
$("p").wrap("<font color='red'></font>");
$("p").wrap("<b></b>");
十九、样式操作
1、获取样式attr("class")
2、设置样式 attr("class","myclass")
3、追加样式 addClass("myclass")
4、移除样式 removeClass("myclass");
5、切换样式 toggleClass("myclass");
6、判断样式 hasClass("myclass")
body * 代表body下的所有控件
实例 样式自己定义 .
$("#div1").addClass("day");
$("#div1").addClass("night");
$("#div1").removeClass("night");
$("#div1").toggleClass("night");


二十一、IECollection 可以按照IE好多版本

二十二、RadioButton 操作
1、获取RadioButton的值
$("input[name=gender]:checked").val();
2、设置RadioButton 的值(两种方式val中的[]不能少)
$("input[name=gender]").val(["男"]);
$(":radio[name=gender]").val(["男"]);
CheckBox操作
获取CheckBox的值

设置CheckBox 这里的val 是 checkbox value的值 不是最后面写的值
$(":checkbox").val(["篮球", "足球", "乒乓球1"]);


二十四、JQuery事件

1、事件绑定bind
$("#btn").bind("click",function(){}) 简写为$("#btn").click(function(){})
2、合成事件hover 变态的写法 hover(enterfn,leavefn)
3、事件冒泡 JQuery也有事件冒泡 从内到外
4、阻止冒泡stopPropagation(); 给匿名函数传个参数 e 调用StopPropagation
5、阻止默认行为preventDefault() 根window.event.returnValue=false 效果一样
6、pageX,pageY, 屏幕点击时的x坐标和y坐标
target 获取触发事件的元素 相当于srcElement 最原始触发的控件
7、which判读鼠标事件的按键(1、左键 2、中键 3、右键)
8、altKey、shiftKey、ctrlKey获得alt、shift、ctrl 是否按下 为bool值
9、keyCode、charCode属性发生事件时的keyCode charCode (主键盘1和小键盘1 keyCode不一样charCode一样)
10、移除事件绑定 unbind() 方法 即可移除元素上所有绑定的事件,如果unbind("click") 则只是移除click事件
11、一次性事件 发生一次的事件 one



$(function() {
$("#tbMain").click(function() { alert('tbmain'); });
$("#tr1").click(function() { alert('tr'); });
$("#td1").click(function(e) { alert('td'); e.stopPropagation(); });
$("#p1").click(function() { alert('p1'); });

});
$("a").click(function(e) { alert('link 不连接了 '); e.preventDefault(); });
//一次性事件
$(":button").one("click", function() {
alert("我只能触发一次");
});
二十六、鼠标
1、获得鼠标的位置

$(function() {
$(document).mousemove(function(e) {
$("#fly").css("left", e.pageX).css("top", e.pageY);
});
});

<div id="fly" style="position:absolute">
<img src="../Image/xiyangyang.gif" />

</div>
二十八、动画
1、show()方法和hide()方法 toggle 切换 参数为显示隐藏的毫秒数

实例为QQ效果
$("#ulqq li:odd").addClass("body");
$("#ulqq li:even").addClass("header").click(function() {
$(this).next("li.body").show(400).siblings("li.body").hide(); ;

});
$("#ulqq li:first").click(); //模拟点击元素

三十、JQuery Cookie JQuery 插件
1、Cookie就是保存在客户端浏览器上的内容
2、Cookie需要浏览器的支持
3、Cookie与域名相关
4、Cookie会被浏览器自动清除,用户可能手动清除
5、Cookie存不重要的数据

三十一、JQuery Cookie的使用 (Cookie保存的是键值对 参数用的时候在查)
1、添加对jquery.cookie.js的引用
2、设置值$.cookie('名字','值'); cookie保存的是文本
3、读取值$.cookie('名字');
4、在同域名的另一个页面中也可以读出来
5、expires:7表示浏览器保存几天
6、domain:设置二级域名互相读
7、path设置网站的哪些页面可以读
//读取
alert($.cookie("用户名"));
//设置
$.cookie("用户名", "tom");
三十五、JQueryUI 这个非常好 用的时候直接调用
1、JQuery插件特别全 可以设置好多的东西
2、http://jqueryui.com/ 去这里下载有Demo
三十六、web开发辅助工具介绍
1、微软IE8自带的工具开发人员工具 Internet Explorer Developer ToolBar

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值