jQuery学习笔记

<div class=”divhidden” id=”divBoatId”>

  • $(document).ready(当页面加载成功时要奉行的函数)

$( class=”s2″>当页面加载成功时要实践的函数 class=”s3″>)

$(function(){});

.item {
 font-weight:bold;
 font-size:12px;
 height:17px;
 width:300px;
 border-bottom:1px solid #abc1dd;
 float:left;
}

<input name=”textfield” type=”text” class=”inputx” id=”txtBoatId”
/>

 1 // 页面加载之后执行
 2 $(function(){
 3     // 事件的绑定方式1
 4     $("#bt3").bind("click",function(){
 5         var old= $("#img_id").prop("width");    
 6         $("#img_id").prop("width",old+100);
 7     });
 8                 
 9     // 事件的绑定方式2
10     $("#bt4").click(function(){
11         //操作属性值
12         var old= $("#img_id").prop("width");
13         $("#img_id").prop("width",old-100);    
14         //操作value值
15         this.value;//this获取的js对象,所以要使用value来获取属性值
16         var value= $(“#username”).val();//获取value属性的属性值
17         $(“#username”).val(“aa”);    //设置value属性的属性值,value方法只能用于:包含“value”属性的表单
18         //操作html内容
19         var str = $(“#aid”).html();
20         $(“#divid”).html(“<a href=“#”>abced</a>”);
21         //操作文本
22         var str = $(“#aid”).text();
23         $(“#pid”).text(“abced”);
24         //操作css属性
25         $(“#pid”).css(“color”,“red”);
26     });            
27 );

class=”Apple-tab-span”> — class=”s4″>准备数据

class=”Apple-tab-span”> <h1 id=”h1_id”> class=”s4″>笔者是神州人 class=”s2″></h1>

        –js代码

class=”Apple-tab-span”> // class=”s4″>获得jquery class=”s4″>对象

class=”Apple-tab-span”> var
#jquery_item =  $(“#h1_id”);

 

class=”Apple-tab-span”> // class=”s4″>转换成js对象 class=”s2″>(方式 class=”s2″>1)

class=”Apple-tab-span”> var
js_item1=#jquery_item[0];

 

class=”Apple-tab-span”>
alert(js_item1.innerText); //使用 class=”s2″>js class=”s4″>方法

 

class=”Apple-tab-span”> // class=”s4″>转换成js对象 class=”s2″>(方式 class=”s2″>2)

class=”Apple-tab-span”> var
js_item2=#jquery_item.get(0);

class=”Apple-tab-span”>
alert(js_item2.innerText); // 使用 class=”s2″>js class=”s4″>方法

<head>
<title></title>

</div>

1.1 认知互相的不等

2.4 使用演示

<html>

 然后打算三个样式类:

 

  • $(document).ready(当页面加载成功时要试行的函数)

border-bottom:1px solid #abc1dd;
float:left;
}

<select id=”BoatId” size=”6″> </select>

a. 来源区别

1 jquery对象和js对象的竞相转换

 

 那样大意作用就多数了,具体细节。。。

a. 语法

 1 // 页面加载之后执行
 2 $(function(){
 3     // 事件的绑定方式1
 4     $("#bt3").bind("click",function(){
 5         var old= $("#img_id").prop("width");    
 6         $("#img_id").prop("width",old+100);
 7     });
 8                 
 9     // 事件的绑定方式2
10     $("#bt4").click(function(){
11         //操作属性值
12         var old= $("#img_id").prop("width");
13         $("#img_id").prop("width",old-100);    
14         //操作value值
15         this.value;//this获取的js对象,所以要使用value来获取属性值
16         var value= $(“#username”).val();//获取value属性的属性值
17         $(“#username”).val(“aa”);    //设置value属性的属性值,value方法只能用于:包含“value”属性的表单
18         //操作html内容
19         var str = $(“#aid”).html();
20         $(“#divid”).html(“<a href=“#”>abced</a>”);
21         //操作文本
22         var str = $(“#aid”).text();
23         $(“#pid”).text(“abced”);
24         //操作css属性
25         $(“#pid”).css(“color”,“red”);
26     });            
27 );

<script src=”js/jquery.js”></script>
<script src=”js/jquery.dimensions.js”></script>
<script src=”js/ui/ui.mouse.js”></script>
<script src=”js/ui/ui.draggable.js”></script>
<script src=”js/ui/ui.draggable.ext.js”></script>
<script src=”js/ui/ui.droppable.js”></script>
<script src=”js/ui/ui.droppable.ext.js”></script>
<script src=”js/ui/ui.sortable.js”></script>
</head>

//船舶基本信息
var boatInfo = [
     { "船舶识别号": "CN20044677878", "中文船名":"海安机00238", "英文船名": "HAI AN JI 00238", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "fsf", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司","箱位":"50" ,"主机功率":"8000"},
     { "船舶识别号": "aN20044677878", "中文船名": "江海安机00238", "英文船名": "JIANG HAI AN JI 22238", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "fdsd ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" },
     { "船舶识别号": "bN20044677878", "中文船名":"南海安机00238", "英文船名": "NAN HAI AN JI 22222", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "dfsf ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" },
      { "船舶识别号": "dN20044677878", "中文船名":"长江00238", "英文船名": "CHANG JIANG 33333", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "fggg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" },
      { "船舶识别号": "eN20044677878", "中文船名":"海风00238", "英文船名": "HAI FENG 00238", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "jhjg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" },
      { "船舶识别号": "fN20044677878", "中文船名":"海鸟00238", "英文船名": "HAI NIAO 00238", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "mmmf ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000" },
      { "船舶识别号": "gN20044677878", "中文船名":"黄海安机00238", "英文船名": "HUANG HAI AN JI 00238", "IMO编号": "--", "初次登记号": "271204001844", "牌簿号": "mfg ", "国籍": "中国", "船籍港": "南通", "船舶种类": "0201_干货船", "海船内河船": "内河船", "船舶长度": "35.0", "建成日期": "2004-09-20", "总吨": "142", "净吨": "79", "总载重吨": "240", "所有人": "海安县第一航运有限公司", "经营人": "海安县第一航运有限公司", "箱位": "50", "主机功率": "8000"}];
var len = boatInfo.length;
  • 和js同样,jquery也设有加载顺序难题。
  • jquery本人包裹了三个document的ready方法,即“页面加载成功时”触发该格局。 
  • $(selector).each(function(index,element)) 

 

第一计划寻找数据:

二、jQuery基础知识

a. 语法

转发网站:

/*用于隐藏搜索到的数据*/ 
.divhidden {
 position:absolute;
 border:1px solid #3475c7;
 display:none;
}

/*用于显示搜索到的数据*/

.divshow { position:absolute; z-index:1000; /* 设置对象的层叠顺序 */ border:1px solid #3475c7; display:block; }

$( class=”s2″>当页面加载成功时要实践的函数 class=”s3″>)

$(function(){});

2.5 偷懒的写法

<script language=”javascript”>
  var elem = ”;
  $(document).ready(function(){
   
    $(“.item”).draggable({
 helper: ‘clone’,
 opacity: 0.55,
 start:function(e, ui)
    {
        elem = e.srcElement || e.target;
    }
    });
  });
 
  $(“.receive”).droppable({
 accept: “.item”,
 activeClass: ‘droppable-active’,
 hoverClass: ‘droppable-hover’,
 drop: function(ev, ui)
    {
        var o = elem.innerHTML;
  var oid = o;
  var sid = “s” + oid;      
       
  //有同样的就不插入了。
  if ( document.getElementById(sid) == null)
  {
            $(this).append( “<div id='” + sid + “‘ title='”+ o +”‘
class=’navitem’>” +  o + “<a href=’#’
onclick=’javascript:$(this.parentNode).remove();’ title=’删除此栏’>
X</a></div>” );
   
     }else  {
澳门新萄京8522,  
  
  alert (“您已经增加了那个栏目,请您删除后再增多,多谢!”)

 前台html如下:

  • 把jQuery对象(q)转换成js对象:q[0]或者q.get(0)

    b. 演示

2.2 语法

 

//船只基本消息var boatInfo =
[ { “船只识别号”: “CN20004677878”, “汉语船名”:”海安机00238″,
“英文船名”: “HAI AN JI 00238”, “IMO编号…

1.2.2 jquery对象 –> js对象

1.2 js对象 –> jquery对象

</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图