锋利的JQuery笔记(一)

JQuery的初始化代码

window.onload = function () {}$(document).ready(function () {})执行时机等待网页的所有内容加载完毕(包含图片)后才会执行网页中的dom创建后就执行编写个数可以编写多个，后面的会覆盖前面的可以编写多个，添加多个后会并行执行简化写法无$(function (){})

JQuery对象和DOM对象的相互转换

1.JQuery对象转换成DOM对象

/* 原理：JQuery对象是类似一个数组的对象 */ // 第一种 var $div = $('#id') var domDiv = $div[0] //第二种 var $div = $('#div') var domDiv = $div.get(0)

注意：如果使用选择器选择了多个JQuery对象，使用如下方式来获取Jquery对象而不是DOM对象

var $divs = $('.test') // 获取第一个jquery div对象 var $div = $divs.eq(0)

2.使用DOM对象来获取JQuery对象

var div = document.getElementById('id') var $div = $(div)

JQuery获取不存在的对象

传统的DOM方式，如果获取不到对应元素，会报错,所以改进措施如下：

if(document.getElementById('id')){ .... }

而使用JQuery获取到的对象如果获取不到并不会报错，但是如果使用JQuery来判断某个对象是否存在，可以采用如下两种方式:

// 第一种，根据获取到的元素长度来判断 $('id').length > 0 // 第二种，通过JQuery对象来获取DOM对象 if($('id')[0]){ ... } // 注意：不能使用如下方式来判断 if($('id')){ ... }

JQuery的DOM操作(注意是JQuery对象的DOM节点)

1.查找元素节点

// 查找ul下第二个li节点 var $li = $('ul li:eq(1)') // 使用JQuery的方法来获取text内容 var li_text = $li.text()

2.查找节点的属性: attr方法

var $p = $('p') var p_name = $p.attr('name')

3.创建DOM节点

var new_li = $('<li></li>') var $ul = $('ul') $ul.append(new_li)

4.插入节点的几个方法

方法描述append()向每个匹配的元素都插入节点appendTo()和append相反,将匹配的元素插入到指定元素中prepend()在匹配的元素的::before中插入内容prependTo()和appendTo类似after()在匹配的元素的::after中插入内容insertAfter()和prependTo()类似before()在元素前面插入节点 1.appendTo // 将li元素插入到ul元素的最后 $('<li></li>').appendTo($('ul')) 2.prepend <p> ::before 测试 ::after </p> $('p').prepend('<em>t</em>') <p> <em>t</em> </p> 3.before <p>测试</p> $('p').prepend('<p>t</p>') <p>t</p> <p>测试</p>

4.删除节点

// 删除 var $li = $('li').remove() // 删除后还可以继续使用其对应的JQuery对象 $li.appendTo($('ul')) // 清空某一节点下的所有节点 $('ul').empty()