jquery-使用小结

1、事件一个个的绑定

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.10.2.min_65682a2.js"></script>
    </head>
 
    //同一个对象绑定多个事件
    <script type="text/javascript">
        $(function() {
            $('div').bind('click', function() {
                alert(21212);
            });
            //鼠标移入事件
            $('div').bind('mouseover', function() {
                $(this).css('background-color', '#70a532');
            });   
            //鼠标移出事件
            $('div').bind('mouseout', function() {
                $(this).css('background-color', 'red');
            });
        });
    </script>
 
    <body>
        <p>jQuery实践绑定</p>
        <div style="background-color: red;height: 122px;width: 122px;">
        </div>
    </body>
</html>

2、通过通过json同时绑定多个事件

<script type="text/javascript">
       $(function() {
            
           var jn = {
               click:function(){
                   alert(2);
               },
           mouseover:function(){
                   alert(3);
           },   
               mouseout:function(){
                   alert(4);
               }
           }
        
       $('div').bind(jn);   
        
        
       });
   </script>

3选择器

1基本选择器
        $('#id属相值')------->document.getElementByid()
          $('tag标签名')------->document.getElementByTagName()
 
      $('s1,s2,s3')联合选择器
       $('*')通配符选择器
        
 
       <script type="text/javascript">
        function one(){   
            $('#xuanze').css('background-color','red');
        }
    </script>
    这个是id选择器
    $('input')     这个是标签选择器
    $('.appp')     这个是css名选择器
    2层次选择器
      根据父节点进行结点的选中
    3 并行选择器
       选中父节点 用关系数字选定下面的第几个的结点
 
 
    4   内容过滤选择器
           包含内容选择器，获得结点内部必须通过标签包含制定的内容
       contains（内容）
 
       $("div:contains(beijing)")
 
       empty
       获得空元素（内部没有任何元素/文本（空））结点对象
       $("div:empty")
       里面什么也没有，空格算是空文本
 
      has
      内部包含制定元素的选择器
      $("div:has(#apple)")
      是通过id 值进行寻找
 
      parent
 
      寻找的结点必须作为父节点存在
 
          $("div:parent")
      寻找结点里面的内容，有一点结点里面不能为空
      为空的话就不死父节点了
5表单域选中
         //$(:checked)过滤出被选中的复选框，单选按钮
            alert($("input:lt(4):checked"));
            console.log($("input:lt(4):checked")) ; 
 
            $("input:gt(3):lt(4):checked")
            其中gt()下标大于多少的，lt()是下标小于多少的
 
            两者一起组合使用需要注意
                        组合使用的话是当gt()确定好下标之后，以gt()考试的位置进行重新的排序，进行lt()的排列
 
 
            下拉框的话是
                         $("input:lt(4):selected")

四：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

$("#dds").attr('value');
    1可以通过id class获取相应的值
 
    2设置相应的值
           $("#dds").attr('value','asasasas');
       如果原来没有值得话加上，有的话就修改
 
 
    3批量修改  
 
        用json进行批量修改
       function one(){
          var ij={name:'sdas',class:'sa'}
 
            $("#dds").attr(ij);     
       }     
 
       4通过函数进行修改
            这个方法纯属装x用
               $("#dds").attr('value',function(){
                    return 12+30;   
           });
 
           5删除属性
               $("#dds").removeAttr('class');   
 
 
class操作
                  
                  $("#dds").attr('class','asasasas');
           $("#dds").attr('class','asas');
           修改class属性
           后面的会吧前面的给覆盖   
 
               $("#dds").addClass('class','asas');
            $("#dds").addClass('class','asas1212');
        这个方法不会出现覆盖，会保留两个class属性
  
         删除class属性  
          
 
 
         $("#dds").removeClass('asasasas'); 
                只是删除class里面的值
         
                  $("#dds").removeAttr('class'); 
          删除class的属性
 
 
          开关class属性值
                   $("#dds").toggleClass('asasasas'); 
           有的话就删除，没有的就加上
2标签包含内容的操作
               
           $("#dds").html();
            $("#dds").text();
            
           （）里面如果有参数的话就是修改信息
                如果为空的话就是获取信息
 
            html()和text()
            方法的区别
 
            html()
            获取的是结点里面全部的信息，包括里面的标签
                     text()
             也是获取信息，但是他获取的是过滤掉标签的信息，也就是只获取文本信息
css样式操作
                     $("#dds").css('width'); 
              
           获得css样式 行内，内部，外部，均可获得
                    普通的dom方式只能获得 行内样式   
 
           document.getElementsByTagName('div')[0].style.width;
value属性快捷操作
         $("#dds").val(); 
     括号里面为空的话是获取值，有值得话是更该、改值
        $("#dds").val(); 
     
     
    复选框
    判断复选框的选中情况 
          $("#dds").attr('checked'); true选中false未选中
 
 
      便利选中的项目，获得value值
           var s=''
      for(var i=0;i< $("#dds:checked").length){
          $("#dds:checked:eq('+i+')").val();  
           s+= $("#dds:checked:eq('+i+')").val()+",";
          删除逗号
      s=s.substr(0,s.length-1);
      }
         
 
      设置多个复选框的选中
      valus值等于2或4的被选中
 
 
      $('.sasas').val([2,4])
    val里面是数组
     这就是val的强大之处
 
 
     复选框的全选和全不选
    $().attr('checked',true)   设置复选框选中
   $().attr('checked',false)   取消复选框选中
       $().attr('checked')    判断选中情况返回布尔值
 
 
 
 
 
 
     下拉列表操作
 
获取当前选中的value
单选的
                  $('option:selected').val()    单选情况
                    
              多选的下拉列表
 
                <select multiple="multiple">
            </select >
            加一个标签就好了
 
            多选情况   
    $('select').val(); 
     
 
 
    单选按钮
    获得选中情况
      $('.sa:select').val();    
      设置选中情况
          $('.sa').val([value值元素]); 
         和复选框的一样，这个只能下、写一个
 
     反选
     for(var i=0;i<$('.hby').length;i++){
 
     var flag=  $('.sa:eq('+i+')').attr('checked'); 
     $('.sa:eq('+i+')').attr('checked',!flag)
      
         
     }
 
 
 
 
 
$符号的由来
        就是一个函数，函数名称是$符号而已
 
 
 
jquery对象和dom对象关系 
        jquery对象：$('li')返回的就是jquery对象
         dom 对象  ：   document.getElementByid() 返回的就是dom对象
         
    jquery对象和     dom 对象的转化
        1两者的成员不能互相调用  
 
 
jquery框架对象分析
             jquery框架对象类型：    jquery对象$对象
            1    jquery对象就是各种选择器创建出来的对象
        2  $对象就是函数对象
 
      $对象可以调用的许多成员也是通过extend复制继承过来的
      $.get()   $.post()
      以上无论是jquery对象还是$对象，他们90%以上的成员都是通过extend复制继承过来的
 
遍历方法
      each()方法
    $.each(数组/对象,function处理)  $对象 调用
      $(选择器).each(function处理)    jquery对象    调用
 
   
 
  1遍历对象  
    $.each(对象,function（k对象属性变量，v对象属性值变量）{}) 
    
   var cat={name:'kity',age:'5',climb:function(){
      alert('buhao');   
       
      }}
 
$.each(cat,function(k,v){
 
console.log(k+'22222'+v);
});
 
 
2遍历数组
$.each(数组,function（k数组属性变量，v数组属性值变量）{}) 
    
   var color=['bule','read','green']
 
$.each(color,function(k,v){
 
console.log(k+'22222'+v);
});     
 
3 遍历jquery对象
$('li').each(function(w对象下标索引值，f 代表具体的每个dom对象){})
 
window.onload=function(){
$('li').each(function(w,f){
 
//this代表遍历出来的每个dom对象  
等同于f
   console.log(w+'===='+f);
})
 
 
}
其中window.onload=function(){}
当js代买写到dom对象前面的时候需要写一下，获取上下文
 
    
$.each()等同于jquery.each()
这是$对象调用的成员
 
$('li').each
这是jquery对象调用的成员
 
 
dom对象也就是具体选中的值
 
 jquery对象：通过各种选择器获得对象都市jquery对象
     $对象：就是函数对象，$.get();    .......  
 
⑦加载事件
       1$(document).ready(function(){})
           2$().ready(function(){})
       3$(function(){})
    jQuery加载事件和传统加载事件的区别
 
 
 
    在同一个请球中，jquery加载事件可以设置多个，而传统的加载事件只能设置一个
    传统的加载方式是给onload事件附值，多次赋值，后面的会覆盖前面的
    jquery加载事件是把每一个加载的事件都存到一个数组里面，成为数组的元素，执行的时候就遍历该数组的每个元素即可，因此，可以设置多个加载事件。
        
 
加载的时机不同    
     传统的加载事件，是全部内容（文字，图片，样式）在浏览器中加载完成之后才执行加载事件
 
     jquery方式，只要全部内容（文字，图片，样式）在内存里面对应的dom树节点绘制完成就给执行，有可能对应的内容在浏览器中还没有显示
 
 
jquery文档事件操作
    1结点追加
           1.1 父节点追加
 
 
新节点的追加    
      后置追加
           <ul id="zhu">
           <li>哈哈</li>
           <li>啦啦啦</li>
           <li>我我我</li>
           </ul>
 
 
             <ul id="zhu">
           <li>哈哈1</li>
           <li>啦啦啦·</li>
           <li id="ad">我我我1</li>
           </ul>
 
           $('#zhu').append("<li>tata</li>");
 
           追加到了我我的后面，在这里就是以ul为父节点在后面追加的
             
 
 
          $('#zhu').prepend("<li>tata</li>");
          追加到了，哈哈的前面
 
已有结点的移动到我我我的后面了
               
          
  $('#zhu').append($("#ad"));
  把id为ad的结点我我我1追加到了
 
 
  <input onclick="过程代码this">
 
  <input onclick="函数()">
  function 函数（）{this}
 
 
  itnode.onclick=函数名称；
               function名称（）{this}
 
  itnode.onclick=  function名称（）{this}
        以上4种情况，第二种this代表window,其他三种代表input元素结点对象        
 
 
 
 
事件绑定
    $().bind(事件类型，function 事件处理);
 
    $().bind(类型1 类型2 类型3，function 事件处理);
 
 
    取消事件绑定
    $().unbind();
 
 
    事件委派
         
    $('li').live('click',function(){})
 
    取消的话是    die
     
 
为什么要用事件委派
  
     如果用append的话新增加的结点的事件是绑定不上的，所以要用live委派处理
 
 
事件对象，阻止浏览器默认动作，阻止冒泡事件
     
 
$().bind('click',function(evt){window.event});
$().click(function(evt){});
$().bind('mouseover',f1)
function f1(evt){}
 
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容的处理    
 
 
$().click(function(evt){
evt.preventDefault();
evt.stopPropagation();
});
 
这两个方法在jquery做好封装了，就是兼容的处理。2017/2/17
 
 
 
动画效果
隐藏
   $('div').hide();  
 
   显示
 $('div').show();  
 
 
 渐进效果
 hide([事件参数毫  秒][处理函数]); 
         $('div').hide(3000，function(){
      
      
     });             
 
 
   $('div').toggle(3000);      
   开关   
 
垂直动画效果
   隐藏     
 $('div').slideUp(3000);   
 
显示   
 $('div').slideDown(3000);  
 
 
显示
 $('div').slideToggle(3000); 
 
 淡入淡出
  
透明度在变化   
 
 隐藏
     $('div').fadeOut(3000); 
 
     显示
      $('div').fadeIn(3000); 
 
 
  $('div').fadeTo(speed,透明度，函数); 
 
 
 
  jquery封装ajax   
 
 
$.ajax
                              
 $.ajax({
 url:'we.php',
 data:{title:'哈哈',date:'4-1'},
 dataType:'json',
 type:'post',
 success:function(mas){
 }         
 });                                                                                  
       
$.ajax({  
        type: 'POST',
        url: '<{:U('Index/public_menuLeft')}>',
        data: {menuid: menuid},
        cache: false,
        beforeSend: function(){
            removeLeft();
            //更新标题名称
            $('body').layout('panel', 'west').panel({title: title});
            var loading = '<div class="panel-loading">Loading...</div>';
            $("#leftmenu").accordion("add", {content: loading});
        },
        success: function(data){
            removeLeft();
            //左侧内容更新
            $.each(data, function(i, menu) {
                var content = '';
                if(menu.son){
                    var treedata = $.toJSON(menu.son);
                    content = '<ul class="easyui-tree" data-options=\'data:' + treedata + ',animate:true,lines:true,onClick:function(node){openUrl(node.url, node.text)}\'></ul>';
                }
                $("#leftmenu").accordion("add", {title: menu.name, content: content, iconCls:'icons-folder-folder_go'});
            });
            leftAreaChangeListen();
        }
    });      
 
   
$.post
 
    $.post('<{:U('Index/login?dosubmit=1')}>', $("form").serialize(), function(data){
 
        if(!data.status){
 
            $.messager.alert('提示信息', data.info, 'error');
 
            changeCode();
 
        }else{
 
            $.messager.progress({text:'加载中，请稍候...'});
 
            window.location.href = data.url;
 
        }
 
    },'json');
   
   
 
 
    if (I('get.dosubmit')){
 
            $admin_db = D('Admin');
 
            $username = I('post.username', '', 'trim') ? I('post.username', '', 'trim') : $this->error('用户名不能为空', HTTP_REFERER);
 
            $password = I('post.password', '', 'trim') ? I('post.password', '', 'trim') : $this->error('密码不能为空', HTTP_REFERER);

posted on 2019-03-21 21:59 ZhanLi 阅读(141) 评论(0) 编辑收藏举报

jquery-使用小结

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论