경량급 자바 script 라 이브 러 리 pj 소개

다른 언어 에 비해 자바 script 스 크 립 트 언어 는 너무 작고 깜찍 하 며 활발 하 다.개인 적 으로 자바 script 코드 를 쓰 는 것 을 매우 좋아 합 니 다.인터넷 에서 유명한 자 바스 크 립 트 라 이브 러 리 는 네트워크 로 가득 차 있 지만 jQuery,Prototype,Base,ExtJs..........................................................하지만 창고 자체 가 너무 크다 는 것 이 만 족 스 럽 지 못 한 점 이 있다.그 중 몇 가지 기능 만 사용 하면 라 이브 러 리 전 체 를 끌 어 들 여야 할 때 도 있 습 니 다.jQuery 에 게 압축 해도 70 여 KB 가 있 고 한 웹 페이지 파일 보다 더 클 때 도 있 습 니 다.그러나 우 리 는 개발 에 협조 할 라 이브 러 리 가 필요 하기 때문에 경량급 자바 script 라 이브 러 리 를 썼 습 니 다.간단 한 선택 기만 지원 합 니 다.그 중에서 많은 선택 기 는 jQuery 를 참고 하여 pj 라 고 명명 되 었 습 니 다.다운로드 소스 코드 는 선택 기:pj("\#id")만 간단하게 소개 합 니 다./id 선택 기,예 를 들 어 pj("\#header"),id 를 header 로 하 는 요소 pj("tag"),//태그 선택 기,예 를 들 어 pj("div"),페이지 의 모든 div pj("[tag].class")를 가 져 옵 니 다.//class 선택 기,예 를 들 어 pj("[tag].className"),className 의[tag]요소 pj("\#id>tag"),//지정 한 id 의 모든 지정 한 요 소 를 가 져 오기;예 를 들 어 pj("\#header>a")는 id 를 header 요소 의 모든 a 요소[자손 요소 포함]pj("tag>tag")로 추출 합 니 다.//지정 한 탭 아래 지정 한 탭 의 요 소 를 가 져 옵 니 다.예 를 들 어 pj("li>a")는 페이지 의 모든 li 요소 아래 의 a 요소[자손 요소 포함]pj("tag[,\#id,tag.class][attr=value]:0,2")를 추출 합 니 다.지정 한 속성 이나 아래 표 시 된 요소 에 따라 요 소 를 추출 합 니 다.예 를 들 어 pj("div[name=value]:0,3")는 페이지 에 name 속성 을 포함 하고 값 이 value 인 첫 번 째 요소 pj("

")를 추출 합 니 다.//div pj 생 성("

내용

");/내용 이 있 는 div 정적 속성 과 방법 만 들 기 LEFTPOSITION RIGHT_POSITION TOP_POSITION BOTTOM_POSITION LEFT_TOP_POSITION LEFT_BOTTOM_POSITION RIGHT_TOP_POSITION RIGHT_BOTTOM_POSITION ready(fn); extend(target,fn); bind({method:function(){}}) isObject(elem) isFunction(elem) isArray(elem) isString(elem) trim(str) merge(target,src) getStyle(target,name) setStyle(target,{}) mouseX(e) mouseY(e) stopBubble(e) stopDefault(e) pageHeight() pageWidth() windowHeight() windowWidth() setOpacity(target,value) enableDrag(trigger,target) parseToQueryString(form) isContain(parent,child) id(id) tag(tag) resetCSS(target,{}) x(target) y(target) wh(target,name)pj 대상 속성 과 방법 timer length get()each()addListener()attr()removeAttr()stop()appendTo()remove()addClass()removeClass()setClass()cut()step()setLocationRelatedTo()isVisible()locate()bind()getStyle()setStyle()abort()blur()change()click()dblclick()error()focus()keypress()keypress()load()unload()moused()mousemove()mouseout()mouseover()mouseup()reset()resize()select()submit()left()top()right()bottom()high()width()animate()slideDown()slideRight()slideLeft()scrollDown()scrollUp()scroll 오른쪽()scroll 왼쪽()hide()show()fadeIn()fadeOut()작은 프레젠테이션

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>     </title> 
<style type="text/css"> 
.cmd{ 
width:300px; 
height:150px; 
background:#F9F; 
border:1px solid #9F6; 
} 
</style> 
<script type="text/javascript" src="http://users4.jabry.com/pengju/src/pj-2.1.0.mini.js"></script></head> 
<body> 
<input type="button" value="test" /> 
<div class="cmd"></div> 
<div class="cmd"></div> 
<div></div> 
<script type="text/javascript"> 
pj("div.cmd:1").hide(800,function(){ 
pj("div.cmd:0").hide({duration:400,effect:tween.quint.easeIn}); 
}); 
pj("input").click(function(){ 
pj("<div>").appendTo(document.body).setStyle({position:"absolute",left:"0px",top:"0px",backgroundColor:"green"}).animate({width:200,height:80,left:200,top:240},{duration:1000,effect:{top:tween.bounce.easeOut,left:tween.linear}},function(){this.hide(1000)}); 
}); 
</script> 
</body> 
</html>

포장 다운로드 주소https://www.jb51.net/jiaoben/33561.html

경량급 자바 script 라 이브 러 리 pj 소개

좋은 웹페이지 즐겨찾기