여러 가지를 한꺼번에 선택해야 하는 경우가 간혹 발생한다.

<span id="str">TEST</span>
<span class="str">TEST</span>
<span>TEST</span>

위와 같은 상황에서 TEST라는 텍스트를 모두 bold를 적용해야 하는 경우가 있다.
이런 경우 Javascript로 할 경우 코드가 좀 길어진다.
id로 갖고 오고 class로 갖고 오고 tag로 갖고.
jQuery의 경우는 한 줄로 모두 선택이 가능하다.

<script type="text/javascript">
$(document).ready(function() {
	$("#str, .str, span").css("font-weight", "bold");
});
</script>

위에서 보는 것처럼 ,(comma)로 구분지어서 선택이 가능하다.

위 예제는 예제일 뿐이니 태클 걸지 말자.
태그 이름으로 해서 갖고 오면 굳이 id, class로 안 갖고 와도 되는 거 다 아니까.


http://nyaongnyaong.com/974

'jquery, ajax' 카테고리의 다른 글

자바스크립트 제이쿼리 this  (0) 2016.01.28
jquery change()  (0) 2015.12.28
ajax를 쓰는 목적  (0) 2015.09.23
ajax를 이용해서 json 배열 받기 예제  (1) 2015.04.07
ajax를 이용해서 json 배열 받기 성공  (0) 2015.04.07
Posted by 이상욱1
,

ajax를 쓰는 목적

jquery, ajax 2015. 9. 23. 15:43

ajax를 쓰는 목적을 알기 위해서는 자바스크립트가 웹프로그래밍에서 처리되는 순서를 알아야한다 

즉 서비스 할 페이지 에 소스를 짜서 서비스를 해야하는데  어떠한 값을 보여주는 서비스를 하고싶다 

이런경우 자바스크립트로 그값을 처리해서 보여준다 

그런경우 사용자는 그값을 널값으로 보게 된다 왜냐하면 html 처리보다 자바스크립트가 늦게 처리되기 때문이다 

그래서 미리 값이 처리된후 html이 처리되기전에 html 이 그걸 받아서 html처리때 같이 처리해야만 사용자들이 그값을 볼수있다 

이러한 경우에 ajax 통신을 이용해서 처리를 가능하게 만든다 

'jquery, ajax' 카테고리의 다른 글

자바스크립트 제이쿼리 this  (0) 2016.01.28
jquery change()  (0) 2015.12.28
다중 셀렉터 다중 css처리  (0) 2015.11.16
ajax를 이용해서 json 배열 받기 예제  (1) 2015.04.07
ajax를 이용해서 json 배열 받기 성공  (0) 2015.04.07
Posted by 이상욱1
,

ajaxjson.html 부분 

<!DOCTYPE html>


<html>


<head>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<script>


$(document).ready(function(){


jQuery.ajax({


type:"post",


url: "./arrayjson.html",//"./test.html",


data:"name=junho",


dataType:"JSON",


success: function(data){


//alert(data);



/* var items =[]; */


$.each(data, function(){


//alert(this["name"]);


// 한줄은 되는데 배열은 오류가 난다 



alert(this.id);


alert(this.name);


alert(this.price); 

alert(this.description); 


/* items.push(val);


alert(val);

 */

});


},


complete: function(data){



},


error:function(xhr, status , error){


alert("에러발생");


}



})


})




</script>






<meta charset="EUC-KR">


<title>Insert title here</title>


</head>


<body>




</body>


</html>









arrayjson.html 부분 

[

  {

    "id": "1",

    "name": "레몬",

    "price": " 3000",

    "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."

  },

  {

    "id": "2",

    "name": "키위",

    "price": " 2000",

    "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."

  },

  {

    "id": "3",

    "name": "블루베리",

    "price": " 5000",

    "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."

  },

  {

    "id": "4",

    "name": "체리",

    "price": " 5000",

    "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."

  },

  {

    "id": "5",

    "name": "메론",

    "price": " 5000",

    "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."

  },

  {

    "id": "6",

    "name": "수박",

    "price": "15000",

    "description": "수분이 풍부한 과일이다."

  } 

]



'jquery, ajax' 카테고리의 다른 글

자바스크립트 제이쿼리 this  (0) 2016.01.28
jquery change()  (0) 2015.12.28
다중 셀렉터 다중 css처리  (0) 2015.11.16
ajax를 쓰는 목적  (0) 2015.09.23
ajax를 이용해서 json 배열 받기 성공  (0) 2015.04.07
Posted by 이상욱1
,

testjson1.jsp 부분 


<%@page import="javax.management.StringValueExp"%>


<%@page import="org.apache.catalina.util.StringParser"%>


<%@ page language="java" contentType="text/html; charset=EUC-KR"


    pageEncoding="EUC-KR"%>




<%@ page import="org.json.simple.*"%>


<%@ page import="java.sql.*"%>




<%




String connect="jdbc:oracle:thin:@lsw.c2lzj8znf3wg.ap-northeast-1.rds.amazonaws.com:1521:ORCL";




String user="lsw";


String passwd="";




Connection conn;


Statement stat;


JSONArray arr = new JSONArray();




try{


System.out.println("ddd");


Class.forName("oracle.jdbc.driver.OracleDriver");


System.out.println("zzzzzz");


conn= DriverManager.getConnection(connect ,user ,passwd);



if(conn!= null){


System.out.println("connect");


}


else{


System.out.println("not connect.");


}


stat= conn.createStatement();



/*String query="select * from TMP_TB";


System.out.println(query);*/


ResultSet rs = stat.executeQuery("select * from productBoard");








 






while(rs.next()){



//rs.next();



String goodsname=rs.getString(1);


String id=rs.getString(13);


//String earning =String.valueOf(rs.getInt(3));


int price=rs.getInt(4);






JSONObject obj = new JSONObject();


obj.put("goodsname", goodsname);


obj.put("id", id); 


obj.put("price", price);



//arr.add(0, obj);


 


if(obj != null){


arr.add(obj);


//out.println(arr.toJSONString());


}

//System.out.println(goodsname +"--"+ id + "--"+ price);



}

System.out.println(arr.toJSONString());

out.println(arr.toJSONString());


rs.close();


stat.close();


conn.close();



}catch(Exception er){



}




/*  String name= request.getParameter("name");


JSONArray jarray = new JSONArray();


JSONObject jobject=new JSONObject();




jobject.put("name", name);


jobject.put("age", "14");


jobject.put("nickname", "qwerty");




jarray.add(0, jobject);


 */


%>



ajaxtest1.html 부분 



<!DOCTYPE html>


<html>


<head>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>


<script>


$(document).ready(function(){


jQuery.ajax({


type:"post",


url: "./testjson1.jsp",//"./test.html",


data:"name=junho",


dataType:"JSON",


success: function(data){


//alert(data);




$.each(data, function(){


//alert(this["name"]);


// 한줄은 되는데 배열은 오류가 난다 



alert(this.goodsname);


alert(this.id);


alert(this.price); 




});


},


complete: function(data){



},


error:function(xhr, status , error){


alert("에러발생");


}



})


})




</script>






<meta charset="EUC-KR">


<title>Insert title here</title>


</head>


<body>




</body>


</html>


'jquery, ajax' 카테고리의 다른 글

자바스크립트 제이쿼리 this  (0) 2016.01.28
jquery change()  (0) 2015.12.28
다중 셀렉터 다중 css처리  (0) 2015.11.16
ajax를 쓰는 목적  (0) 2015.09.23
ajax를 이용해서 json 배열 받기 예제  (1) 2015.04.07
Posted by 이상욱1
,