发表于： 2017-01-08 17:11:20
1 1339
今天完成的事情：jq学习 jq的动画 jq的抓取
明天计划的事情：js基本知识捋一遍 然后jq继续学习：然后想重新用jq写一遍任务：算是这两天的任务
遇到的问题：
任务进度慢，都是要学习的 然后任务慢一点就慢一点吧
（肚子就那么大一口一口吃）
收获：黑色背景的是解释：其他颜色的都是方法，
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
通过 jQuery text() 和 html() 方法来获得内容
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
通过 jQuery val() 方法获得输入字段的值
$("button").click(function(){
alert($("#w3s").attr("href"));
});
获得a标签里面href
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
先字体消失，然后弹出框，可以放在消失的里面=。=
放后面就会产生错误或页面冲突
$("#stop").click(function(){
$("div").stop();
});
停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$("#stop2").click(function(){
$("div").stop(true);
});
"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都止。
$("#stop3").click(function(){
$("div").stop(true,true);
});
"停止但要完成" 会立即完成当前活动的动画，然后停下来。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
height:'+=150px',
width:'+=150px' 这个可以让动漫点一下递增
//动画网右边移动250px可以加透明 高宽 什么的
首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
通过长宽的变化 然后缓慢使得这个可以变化 颜色也可以变化
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
可以使这个向右移动100px然后字体变成3em
parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
.parent(selector)
嵌套常用
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
直接缓慢淡入
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
直接淡出缓慢的淡出
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});//淡出用法后面的是淡出的多少
<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});//淡出淡入 一起 跟切换一样
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
$("button").click(function(){
$("p").toggle();
});//隐藏 切换 然后hide 用到2个的时候就可以直接用切换代码也变少
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});//点击隐藏p 过程1秒
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有 <p> 元素：
$("p").hide();
| 语法 | 描述 |
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素
使用JQ 使用自己网页谷歌
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
<html>
<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){$("p").hide();});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
返回列表
评论