学习内容:
bind("click",function())
通过$定位后使用.bing绑定事件,后面是方法
参考代码:
使用 .toggle()等同于.hide();.show();
参考代码:
四.toggleClass();addClass("")添加样式 .removeClass();删除样式
使用.toggleClass("");可以添加自己style样式名里面的样式,也可以.addClass("");
使用.removeClass("");可以删除自己style样式名里面的样式
参考代码:
一种用于是不写东西获取相应的值,另外一种的用途是赋值
参考代码:
七.节点插入的操作
以下代码通过"#tv_but"定位相应位置,使用标签赋值给typeli,再通过转换的形式赋值给str,通过prependTo进行位置的插入
注:以下prependTO输入插入的一种方法,还有其他方法可以查看
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
参考代码:
1.绑定事件 .bind
2.移入移出事件 .hover
3.显示隐藏事件 .toggle
4.添加样式 .toggleClass();addClass(); 删除样式 .removeClass();
5.获取或则添加值 val
6.获取移动框的次数 .resize()
7.节点的插入操作 prependTo 等方法
bind("click",function())
通过$定位后使用.bing绑定事件,后面是方法
参考代码:
$(document).ready(function () { $("#nav li:first").bind("click",function () { $(".taskContent").css({"background-color":"#26a6e3"}); $("#dayTask").show(); $("#growTask").hide(); }) $("#nav li:last").bind("click",function () { $(".taskContent").css({"background-color":"#ff9400"}); $("#dayTask").hide(); $("#growTask").show(); }) })
二.hover()方法 等同于鼠标移入和移出的方法使用.hover等同于.mouseover .mouseout参考代码:
$(document).ready(function () { $(".nav-box>ul li").hover(function () { $(this).find("div").show(); $(this).toggleClass("sss"); },function () { $(this).find("div").hide(); $(this).removeClass("sss"); }); });三.toggle()方法 等同于隐藏或则显示元素的方法
使用 .toggle()等同于.hide();.show();
参考代码:
$(document).ready(function () { $("input").click(function () { $("p").toggle().toggleClass("gettogoyangshi"); }); });
四.toggleClass();addClass("")添加样式 .removeClass();删除样式
使用.toggleClass("");可以添加自己style样式名里面的样式,也可以.addClass("");
使用.removeClass("");可以删除自己style样式名里面的样式
参考代码:
<style> .sss{ background-color: orange; } </style>
$(document).ready(function () { $(".nav-box>ul li").hover(function () { $(this).find("div").show(); $(this).toggleClass("sss"); },function () { $(this).find("div").hide(); $(this).removeClass("sss"); }); });五. val 获取或则添加值
一种用于是不写东西获取相应的值,另外一种的用途是赋值
1.val.();
2.val.("输入的东西")
参考代码:$(document).ready(function () { $("#tv_btn").click(function () { var str = $("input[type='text']").val(); if(str==""||str==null){ alert("输入的不能为空") str = $("input[type='text']").val("给我输入东西知道吗?"); }else{ alert($("input[type='text']").val()) } }) })六. .resize()获取移动框的次数
参考代码:
var num=0; $(document).ready(function () { $("#lianxi a").mouseover(function () { $(this).css({"color":"red"}); }).mouseout(function () { $(this).css({"color":"black"}); }) $(window).resize(function () { $("span").text(num++); }) })
七.节点插入的操作
以下代码通过"#tv_but"定位相应位置,使用标签赋值给typeli,再通过转换的形式赋值给str,通过prependTo进行位置的插入
注:以下prependTO输入插入的一种方法,还有其他方法可以查看
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
参考代码:
<script> $("#tv_but").click(function () { var typeli="<li>新增加的</li>"; var str = $(typeli); $(str).prependTo("ul"); });