欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery学习笔记(1)——选择器

程序员文章站 2023-10-18 22:43:10
JQuery本质上还是JavaScript,是JavaScript的一个框架,可以让我们更简洁地去使用JavaScript 使用之前,记得在html头部引用JQuery 通过选择器获得JQuery对象 id element class selector1,selector2... 层级 attrib ......

jquery本质上还是javascript,是javascript的一个框架,可以让我们更简洁地去使用javascript

使用之前,记得在html头部引用jquery

通过选择器获得jquery对象

  • id
$('#mydiv').css('background:red');
  • element
$('h2').css('color:red');
  • class
$('.mydiv').css('color:red');
  • selector1,selector2...
$('#mydiv,#mytext').css('background:red');
  • 层级
    <h2>this is h2</h2>
    <h3>this is h3</h3>

    $('h2 + h3') 当h2和h3为同级,且相邻

    <form>
        <input name="t1">
        <form>
            <input name="t2">
        </form>
    </form>

    $('form > input') form标签的子元素
    使用此,只会获得name=t1的input元素

    $('form input') form标签之中,子元素,孙元素...
    使用此,会获得name=t1和name=t2的两个input元素
  • attribute
$('[href]')
$("[type!='button']")
$("[type^='b']") 以b开头
$("[type$='b']") 以b结尾
  • 表单
//input标签,name属性为username的全部元素
$("input[name='username']")
表单对象属性
$('input:checked')

文档解析完毕执行操作

html文档首先是被解析,之后才会被显示
解析完毕也就是ready事件的触发

$(document).ready(function () {
    //相关的操作,如修改样式等
});

//ready简写方式
$(function(){
    //相关的操作,如修改样式等
});

创建并添加元素

var title = $('<h1>这是标题</h1>');
$('#mydiv').append(title);

修改css

  • 单个属性
//把全部class属于mydiv的元素的样式都修改
$('.mydiv').css('background:red');
  • 多个属性
//属性有"-",得加上引号,没有"-",可以省略引号
$('.mydiv').css({'background-color':'red',width:'50px'});

jquery对象转为dom对象

有两种方法

  • jqueryobject[0]
  • jqueryobject.get(0)
var mydiv = $('.mydiv')[0];
var mydiv = $('.mydiv').get(0);