Jquery-基础知识点

jquery 包含的功能

1.HTML元素选取、操作

2.CSS操作

3.HTML事件函数

4.Javascript特效和动画

5.HTML DOM遍历和修改

6.AJAX

7. Untilities  工具类

基础

text()函数改变this中的文档内容

$("li").click(function (){
	$(this).text("hello!boy!");
});

before方法

$("p").before(‘<h1>这是before的测试方法</h1>‘);

bind , unbind方法

bind 和unbind及onclikc和officlick方法都是调用on和off方法来实现的

$("#test").bind(
	‘click‘,function (){
		alert("这是事件触发的文字")
	}
);
$("#test").unbind(‘click‘);

下面的这个不会用

event.stopPropagation();    阻止父级事件

event.stopImmendiatePropagation();  阻止所有的事件

for(var i = 0; i<5;i++){
$("<div style=‘color:red‘>this is new word!</div>").appendTo(document.body);   // 这个appendTO(document.body)很有用
			}
				

fadeToggle  隐藏函数

slideUp       也是隐藏函数

是两种不同的函数,其实Toggle的时间设置的适当的话，和fadeToggle差不多

animate动画方法

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
}); 

jQuery 方法链接chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);     //  让事件一次绑定多个方法

$("div").Remove()  不写就是删除所有元素

$("div").empty()     删除所有元素

$("div").addClass("style=color:red");   给DIV标签增加样式

outerHeight , outerWidth

<p>Hello</p><p></p>
 
<script>
var p = $( "p:first" );
$( "p:last" ).text(
  "outerHeight:" + p.outerHeight() +
  " , outerHeight( true ):" + p.outerHeight( true ) );
</script>

输出   outerHeight:33 , outerHeight( true ):53

Jquery 的遍历和过滤

同级遍历

向下遍历 find  在标签中找，find中必须写元素

<p><span>Hello</span>, how are you?</p>
<p>Me? I‘m <span>good</span>.</p>

$( "p" ).find( "span" ).css( "color", "red" );

向上遍历

parent 在标签的外层查找一个包含的母元素作为选择器

parents 在外层查找匹配的标签，没有的话就选择所有的外层标签

$( "li.item-a" ).parent().css( "background-color", "green" );
$( "li.item-a" ).parents("li").css( "background-color", "green" );

向下遍历next    同级遍历 siblings

$("h2").siblings().css({borer:"3px solid #ff0022});        //选择除了自己以外的其他同级元素
$("h2").next().css({border:"3px solid #ff0022}); 
$("h2").nextAll().css({border:"3px solid #ff0022});  
$("h2").nextUntil("h4").css({border:"3px solid #ff0022});   // 这个只能往下找

向下遍历  first  last  eq  filter

$("li").first().css("background-color","red"); 
$("li").last().css("background-color","red"); 
$("li").eq(1).css("background-color","red");                  // 选择第二个li元素
$("li").filter(".item-1").css("background-color","red");      // 第二次过滤，选择class = item-1的元素

jquery扩展

$.noConflict();                           //  这个声明了之后就不能再使用$符号了，必须自定义关键字来写语句，不一定非要使用jQuery关键字
jQuery("li").click(function (){
	jQuery(this).text("hello!boy!");
});

jQuery UI

1.交互，一些与鼠标相关的内容

Draggable,Droppable,Resizable,Selectable,Sortable

2.小部件，一些界面的扩展

AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner

3.效果，提供丰富的动画效果

Add Class , Color Animation , Toggle

unload 和 beforeunload 

unload 和 beforeunload 都没法区分刷新和关闭，只要当前页面unload了就会触发（关闭，刷新，点击链接，输入地址等等）

unload 可以做些清理工作，但是不能用preventDefault来阻止页面关闭。（jquery unload )

alert实际执行了，只是大部分浏览器会阻止正在关闭的窗口弹对话框。如果你用chrome，可以打开Developer Tool并点击右下角的齿轮设置，选择 Preserve log upon navigation，可以查看到unload里的console.log。因为unload一返回，页面就关闭，如果有ajax请求什么的，都一定要同步调用（async:true），不然页面unload完资源就全部注销了。

beforeunload 如果返回值不是null或者undefined，浏览器会负责跳出个confirm对话框，返回值可以会做为提示的一部份也可能压根就不用。

唯一能阻止页面关闭的就是beforeunload返回truthy value，并且用户点击了Cancel/No

Chrome不支持本地Ajax请求，当我在.html文件中访问.json文件时就会出现这个问题，就是说这html文件。所以调试的时候需要有web服务器。

所以下面代码中的url是无法访问的

$(document).ready(function(){
  $("#b01").click(function(){
     htmlobj=$.ajax({url:"e:/test1.txt",async:false});
     $("#myDiv").html(htmlobj.responseText);
  });
});

来自为知笔记(Wiz)