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);
  });
});

DOM	用途说明	Jquery
document.createElement(TagName)	创建元素	$("TagName")
parentElement.appendChild(Element)	附加子节点	$parentElement.Append()  $Element.AppendTo(parentElement)
parentElement.insertBefore(Element, siblingElement)  parentElement.insertBefore(siblingElement, Element)	插入兄弟节点	$(siblingElement).before(Element) $(siblingElement).after(Element)
document.GetElementById(ElementId)	通过ID属性获取元素	$("#ElementId")
document.GetElementsByTagName(ElementsTagName)	通过标签名称获取元素	$("TagName")
document.GetElementsByName(ElementsName)	通过Name属性获取元素	$("Elements[name=ElementsName]")
Element.parentNode.removeChild(Element)	移除元素	$Element.remove()
Element.innerText	获取或设置元素的innerText	$Element.Text()
Element.innerHTML	获取或设置元素的innerHTML	$Element.HTML()
Element.className Element.style	获取或设置元素的样式表	$Element.addClass(className) $Element.toggleClass(className) $Element.removeClass(className)
Element.cssText	获取或设置元素的style	$Element.css()
Element.getAttribute(attributeName)	获取元素的value	$Element.attr(attributeName)
Element.setAttribute(attributeName, attributeValue)	设置元素的value	$Element.attr(attributeName, attributeValue)
Element.parentNode	获取元素的父节点	$Element.parent()
Element.childNodes	获取元素的子节点	$Element.children()
Element.previousSibling	获取元素的前一个兄弟元素	$Element.prev()
Element.nextSibling	获取元素的后一个兄弟元素	$Element.next()
window.onload() = function() {};	绑定窗体加载事件	$(document).ready(function() {}); $(function() {});
Element.onclick = function() {};	绑定元素的单击事件	$Element.click(function() {});

简单选择器
$("#ElementId")	ID选择器
$("TagName")	标签选择器
$(".ClassName")	类名选择器
$("*")	通配符选择器
$("Selector1, Selector2,…, SelectorN")	组合选择器
层次选择器
$("Selector1 Selector2")	后代选择器
$("Selector1 > Selector2")	子代选择器
$("Selector1 + Selector2")	相邻兄弟选择器
$("Selector1 ~ Selector2")	兄弟选择器
子元素选择器
$(":nth-child(index/even/odd/equation)")
$(":first-child")
$(":last-child")
$(":only-child")
滤镜选择器
$(":first") $(":last")
$(":even") $(":odd")	奇偶数选择器
$(":eq(index)") $(":gt(index)") $(":lt(index)")	不等式选择器
$(":visible") $(":hidden")	可见性选择器
$(":header")	标题选择器
$(":animated")	动画选择器
$(":not(filter)")	反选选择器
表单选择器
$(":button")	按钮
$(":checkbox")	复选框
$(":file")	文件域
$(":hidden")	隐藏元素
$(":image")	图像域
$(":input")	输入控件
$(":password")	密码框
$(":radio")	单选按钮
$(":reset")	重置按钮
$(":submit")	提交按钮
$(":text")	单行文本框
$(":enabled")	可用元素
$(":disabled")	不可用元素
$(":checked") 适用于checkbox、radio	选中元素
$(":selected") 适用于option

来自为知笔记(Wiz)