jQuery框架简单使用

作者: 什么23 | 来源:发表于2020-02-08 00:18 被阅读0次

引入jQuery可以通过下载之后引入或者网络引入：
<script src=“存放的位置”></script>
jQuery框架提供了一个全局对象：jQuery，它还有另外一个别名：$
所有的Dom操作都可以通过jQuery来完成。

*在文档就绪之前，无法安全的操纵页面。 $(document).ready()仅在页面文档模型（DOM）准备好执行JS代码之后，内部代码才会运行。$ (window).on(‘load’, function(){…})一旦整个页面（图像或iframe，而不仅仅是DOM）准备就绪，其中包含的代码就会运行。

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js”></script>
    <script>
    $( document ).ready(function() {
        console.log( “document loaded” );
    });
 
    $( window ).on( “load”, function() {
        console.log( “window loaded” );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

$( document ).ready()也可以简写为：

$(function() {
    console.log( "ready!" );
})

jQuery选择器

$(选择器) 进行元素选择，返回的是jQuery的文档对象。选择器包括元素名选择器、id选择器、class选择器、属性选择器、伪类选择器等。

$(‘div’) // 元素名选择器
$(‘#img1’) // id选择器
$(‘.nav’) // class选择器
$(‘[name=link1]’) // 属性选择器
$(‘div:first’) // 伪类选择器

获取与设置元素

html()，获得节点的html字符串，参数可以填写html节点的字符串，会返回html节点。

$(‘ul’).html() // 返回ul标签下的所有节点
$(‘ul’).html(‘<li>haha</li>') // ul标签的子标签设置成了列表项haha

text()，获得节点的文本内容，参数可以填写字符串，返回的就是参数的字符串。

$(‘li’).text() // 获取li标签里的内容
$(‘li’).text(‘haha’) // 设置li标签里的内容为haha

val()，获得节点的value属性值，填写参数也可以设置value值。

<input value="haha" />
<script type="text/javascript">
    $('input').val() // 获取value值haha
    $('input').val('enen') // 设置value值为enen
</script>

attr()，获取或者修改属性值。填写一个参数为要获得的属性值；两个参数为修改属性值，第一个参数为要修改的属性，第二个参数为修改的值；设置多个属性可以使用列表作为参数。

$(‘div’).attr(‘class’) // 获取div的class值
$(‘div’).attr(‘id’, ‘haha') // 设置div的id为haha
$(‘div’).attr({‘class’: 'haha', 'id': 'enen'}) // 设置div的class为haha，id为enen

元素dom操作

创建元素

把要创建的对象直接写入$()就可以创建相应的对象节点。

new_element = $(‘<div>') // 创建了一个div对象
new_element[0] // 0号位为它的节点
new_element = $('<p>新的节点</p>') // 可以直接写入内容
new_element = $('<div><ul><li>haha</li><li>enen</li></ul></div>') // 可以创建一系列的节点

插入元素

父元素.append(要添加的子元素)。append方法会把要添加的元素添加到子元素的最后。可一次添加多个项目，用逗号分隔。

$('ul').append('<li>haha</li>') // 直接为ul添加内容为haha的列表项
new_element = $('<p>enen</p>') // 也可以先创建再添加
$('#container').append(new_element)

要添加的子元素.appendTo(父元素)。appendTo方法与append方法正好相反，要添加的子元素在前，父元素为参数。都是添加到自元素的末尾。

$('<li>haha</li>').appendTo('ul') // 直接添加内容为haha的列表项到ul
new_element = $('<li>enen</li>') // 也可以先创建再添加
new_element.appendTo('ul')

父元素.prepend(要添加的子元素)。prepend方法会把要添加的子元素添加到子元素的最前面。可一次添加多个项目，用逗号分隔。

$('ul').prepend('<li>haha</li>') // 直接为ul添加内容为haha的列表项
new_element = $('<p>enen</p>') // 也可以先创建再添加
$('#container’).prepend(new_element)

选择器.before(要插入的节点)。before方法会把要插入的节点插入到指定的节点之前。它们是同级之间插入。

$('ul>li:nth-child(3)').before('<li>ouou</li>') // 在ul的第三个li标签之前插入内容为ouou的列表项

选择器.after(要插入的节点)。after方法会把要插入的节点插入到指定的节点之后。它们是同级之间插入。

$('ul>li:nth-child(3)’).after('<li>ouou</li>') // 在ul的第三个li标签之后插入内容为ouou的列表项

克隆元素

要克隆的元素.clone()。clone方法会克隆指定的元素，可以把它赋给一个变量另作他用。

ol = $(‘#item’).clone()
$(‘div’).append(ol)

删除元素

要删除的元素.remove()。remove方法会删除指定的元素。元素删除后，如果重新添加回页面，会丢失事件与关联数据。

$(‘ul’).remove()

要删除的元素.detach()。detach方法会删除指定的元素。元素删除后会保留事件与关联数据，这点与remove不同。

$(‘ul’).detach()

元素的遍历

父级元素与所有祖先元素的遍历

选择器.parent()。parent方法会返回某个元素的父元素的对象。parent()[0]会返回父元素的节点。包含它的子孙元素。

li = $('ul>li:eq(0)')
li.parent() // 返回li的父元素对象
li.parent()[0] // 返回li的父元素节点，包括它的子孙元素

选择器.parents()。parents方法会返回某个元素的所有祖先元素的数组对象。通过索引可以访问某个祖先元素的节点，包括它的子孙元素。

li = $('ul>li:eq(0)')
li.parents() // 返回li的祖先元素的数组对象
li.parent()[1] // 返回li的某个祖先元素节点，包括它的子孙元素

选择器.closest(选择器)。closest方法会根据它参数里的选择器找到某个节点的祖先元素里离它最近的符合条件的节点对象。

li = $('.li')
li.closest('.news') // 返回li的祖先元素里class为news的最近的节点数组对象
li.closest('.news')[0] // 返回li的祖先元素里class为news的最近的节点

子元素与所有后代元素的遍历

选择器.children()。children方法可以填参数也可以不填参数。不填参数会返回某个节点的所有子元素（不含其他后代元素）。参数可以填写选择器，返回符合条件的子元素。

$('.news').children() // 查找class为news的所有子元素
$('.news').children($('#haha')) // 查找class为news的元素的id为haha的子元素

选择器.find(选择器)。find方法会返回某个元素符合条件的所有后代元素。

$(‘.news’).find(‘li’) // 查找class为news元素的所有li

兄弟节点的遍历

选择器.prev()。prev方法会返回某个节点的前一个兄弟节点对象。

$(‘.news>li:eq(4)’).prev() // 返回选定节点的前一个兄弟节点的数组对象
$(‘.news>li:eq(4)’).prev()[0] // 返回选定节点的前一个兄弟节点

选择器.prevAll()。prevAll方法会返回某个节点之前的所有兄弟节点的数组对象。

$(‘.news>li:eq(4)’).prevAll() // 返回选定节点前的所有兄弟节点的数组对象
$(‘.news>li:eq(4)’).prevAll()[3] // 返回选定节点前的所有兄弟节点的某个节点

选择器.next()。next方法会返回某个节点的下一个兄弟节点对象。

$(‘.news>li:eq(0)’).next() // 返回选定节点的下一个节点的数组对象
$(‘.news>li:eq(0)’).next()[0] // 返回选定节点的下一个节点

选择器.nextAll()。nextAll方法会返回某个节点之后的所有兄弟节点数组对象。

$(‘.news>li:eq(0)’).nextAll() // 返回选定节点之后的所有兄弟节点数组对象。
$(‘.news>li:eq(0)’).nextAll()[2] // 返回选定节点之后的所有兄弟节点数组对象中的某个节点。

选择器.siblings()。siblings方法会返回选定节点的所有兄弟节点的数组对象。

$(‘.news>li:eq(3)’).siblings() // 返回选定节点的所有兄弟节点数组对象。
$(‘.news>li:eq(3)’).siblings()[2] // 返回选定节点的所有兄弟节点数组对象中的某个节点。

each方法

each方法可以把选择器选择出来的数组对象进行遍历，它的参数为方法函数。

$(‘.news’).children().each(function(){
    console.log(this)
})

元素样式

通过css获取或者设置样式

css方法可以可以获得或者设置元素的样式。
获得：选择器.css(属性名)
设置：选择器.css(属性名，值)，选择器.css({多个属性键值对})

$(‘#div1’).css(‘width’) // 获取width属性值
$(‘#div1’).css(‘border’, ’10px solid red') // 设置border的属性值
$(’#div1’).css({
    ‘border’: ‘1px solid red’,
    ‘background’: ‘#fff’,
    ‘padding’: ’20px’
})

classList的操作

选择器.addClass(值)。addClass方法会给指定的元素添加指定的class值。

$(‘#div1’).addClass(‘haha’) // 给id为div1的元素添加class值haha

选择器.removeClass(值)。removeClass方法会删除指定元素的指定class值。

$(‘#div1’).removeClass(‘enen’) // 给id为div1的元素删除class值enen

选择器.toggleClass(值)。toggleClass方法在指定元素没有指定的值时会添加上指定的值，指定元素有指定的值时会删除指定的元素。

$(‘#div1’).toggleClass(‘haha’) // id为div1的元素class值中有haha就会把haha删除，没有haha就会添加上haha

选择器.hasClass(值)。hasClass方法用于判定指定的元素有没有指定的class值，返回值为布尔值true或者false。

$(‘#div’).hasClass(‘haha’) // 判断id为div1的元素class里有没有haha

元素大小的获取与设置

获取、设置元素width和height的大小：
选择器.width()
选择器.height()
设置大小直接填入参数。

$(‘#div1’).width() // 获取元素的width
$(‘#div1’).height() // 获取元素的height
$(‘#div1’).width(‘100px’) // 设置元素的width
$(‘#div1’).height(‘100px’) // 设置元素的height

获取元素包含padding的宽高：
选择器.innerWidth()
选择器.innerHeight()

$(‘#div1’).innerWidth() // 获得元素包含padding的宽度
$(‘#div1’).innerHeight() // 获得元素包含padding的高度

获取元素包含margin、padding、边框线的宽高（默认不包含margin，要包含margin要在参数里填true）：
选择器.outerWidth()
选择器.outerHeight()

$(‘#div1’).outerWidth() // 获得元素包含padding、边框的宽度
$(‘#div1’).outerHeight() // 获得元素包含padding、边框的高度
$(‘#div1’).outerWidth(true) // 获得元素包含margin、padding、边框的宽度
$(‘#div1’).outerHeight(true) // 获得元素包含margin、padding、边框的高度

获取元素的位置：
选择器.position()

$(‘#div’).position() // 获取元素的位置

事件处理

选择器.on(“事件类型”, “子选择器”, data, function(e){})

$('#container').on('click', {'myname': 'haha'}, function(e){
    console.log('click')
    console.log(e.data) // 获得第二个参数传入的数据
    console.log(e.pageX, e.pageY) // 获得点击的位置

选择器.bind(“事件类型”, data, function(e){})

$('#container').bind(‘click', {'myname': 'haha'}, function(e){
    console.log('click')
    console.log(e.data) // 获得第二个参数传入的数据
    console.log(e.pageX, e.pageY) // 获得点击的位置

on和bind方法的区别在于on方法可以填入参数‘子选择器’，通过子选择器可以实现事件代理。

$('.news').on('click', 'li', function(e){
    e.stopPropagation()
    console.log(arguments)
    console.log($(this).text())
            })

jQuery中事件机制为冒泡机制。