jquery相关语法实例介绍

(1)事件相关

点击事件：

$("#AddCart").click(function(){

           $("#hidbuyOrAddType").attr("value","1");//设置值

       });

on添加点击事件：

$("p").on("click",function(){ alert("The paragraph was clicked."); 　 });

$("#div1").on("click","p",function(){ $(this).css("background-color","pink"); 　　 });

(2)

a：给span标签赋值

     $("#skuprice").html(skuprice);

    获取span标签的值

      $("#hidbuyOrAddType").text();

b:给hidden赋值：

   $("#hidbuyOrAddType").attr("value","1");

   获取hidden值：

   $("#hidbuyOrAddType").val();

c：ul li里面标签或值的查找

<ul>

   <li class="ui-radioBox-option ui-radioBox-option-selected">

     <span class="name">依兰花甜蜜樱桃</span>

      <span class="price">￥35.00</span>

       <span class="status">?7?7</span>

      <input type="hidden" id="hidskuid_li" value='120'/>

    </li>

</ul>

  例子：

            var skuname0 = $("ul li").eq(0).children('.name').text();//获取ul里面第一个li里面的class为name的值

           $("ul li").click(function () {

                 var li_index = $(this).index();//获取被点击的li的索引值

                 var skuname = $(this).children('.name').text();//获取被点击的li里面的子标签class为name的值

                 var skuprice = $(this).children('.price').text();// 获取被点击的li里面的子标签class为price的值

                 var skuid = $(this).children('#hidskuid_li').val();// 获取被点击的li里面的子标签id为hidskuid_li 的值

                 $(this).addClass("ui-radioBox-option-selected").siblings().removeClass("ui-radioBox-option-selected");//被点击的li增加选中样式，其他的li                          去掉选中样式

                 $(".selectGoodType-media #skuprice").html(skuprice);//给span标签赋值

                 $("#hidskuid").attr("value", skuid);

             });

d:div的隐藏和显示：

  $(".selectGoodType").hide();//隐藏

  $(".selectGoodType").show();//显示

例子：

       <div class="list-sort-options">

                <a class="option active" href="javascript:void(0)"><span class="icon-fire"></span>爆款</a>

                <a class="option" href="javascript:void(0)"><span class="icon-sales"></span>销量</a>

                <a class="option" href="javascript:void(0)"><span class="icon-sort"></span>时间</a>

                <a class="option " href="javascript:void(0)"><span class="icon-sort"></span>价格</a>

            </div>

 //导航

          $('.list-sort-options a').click(function(){

            var itemindex=$(this).index();

            if(itemindex=="0")//爆款

            {

            }

            else if(itemindex=="1")//销量

            {

            }

              else if(itemindex=="2")//时间

            {

            if($(this).children('span').attr("class")=="icon-sort")//如果被点击的a标记里面span标签的class的值是 icon-sort

            {

               $(this).children('span').attr("class","icon-sort-down");//改变class的属性值

            }

            else if($(this).children('span').attr("class")=="icon-sort-down")

            {

              $(this).children('span').attr("class","icon-sort");

            }

         }

            else if(itemindex=="3")//价格

            {

             if($(this).children('span').attr("class")=="icon-sort")

            {

               $(this).children('span').attr("class","icon-sort-down");

            }

            else if($(this).children('span').attr("class")=="icon-sort-down")

            {

              $(this).children('span').attr("class","icon-sort");

            }

            }

            $(this).addClass("active").siblings().removeClass("active");

          });

e:div是否包含某个calss

     1.  使用 is(‘.classname’) 的方法

    $('div').is('.redColor')

     2. 使用hasClass(‘classname’)的方法(注意jquery的低版本可能是hasClass(‘.classname’))

$('div').hasClass('redColor')

(3)获取head里面title的标题：

document.title