jQuery框架简单使用

2020-02-08  本文已影响0人  什么23

*在文档就绪之前，无法安全的操纵页面。(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>

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

jQuery选择器

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

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

获取与设置元素

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

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

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

$(‘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>') // 可以创建一系列的节点

插入元素

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

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

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

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

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

克隆元素

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

删除元素

$(‘ul’).remove()

$(‘ul’).detach()

元素的遍历

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

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

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

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

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

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

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

兄弟节点的遍历

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

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

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

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

$(‘.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的操作

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

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

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

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

元素大小的获取与设置

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

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

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

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

事件处理

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

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

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

猜你喜欢

热点阅读