【JQ基础】

时间:2021-08-08 21:37:39
$(document).ready(function(){});//用来在DOM加载完成之后执行一系列预先定义好的函数。
$(function(){});//$(document).ready(function(){}) 的简写

1、JQuery的ready函数

$(document).ready(function(){
});

2、JQuery选择器的应用,比如根据id获取dom节点,根据class获取dom节点,根据标签获取dom节点

一、基本选择器

$("#btn1");//id选择器 根据id获取dom节点
$(".show");//类选择器 根据class获取dom节点
$('input');//元素选择器 获取标签是input的所有节点
$('form *').css('color', '#FF0000');//*选择器 遍历form下的所有元素,将字体颜色设置为红色
$('p,div').css('margin', '0');//并列选择器 将p元素和div元素的margin设为0

二、 层次选择器

$('div > span');//直系子元素 选取div下的第一代span元素
$('.item + div');//prev + next(下一个兄弟元素,等同于next()方法)
$('.item').next('div');//选取class为item的下一个div兄弟元素
$('.inside ~ div');//prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)
$('.inside').nextAll('div')//选取class为inside之后的所有div兄弟元素

三、 过滤选择器

$('span:first');//:first 取第一个元素
$('span:last');//:last 取最后一个元素
$('div:not(.wrap)');//:not 取非元素
$('tr:even')//:even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)

参考:http://www.360doc.com/content/14/0828/08/19107491_405258451.shtml

3、JQuery简单的取值赋值函数,比如input文本框的value值获取与赋值,普通dom节点Html的输出等

$('#ipt').val();//获取id是ipt节点的值。
$('#ipt').val('abc');//id是ipt节点的值设置为abc
$('#div1').html('<input type="button" value="按钮"/>');//添加按钮
  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值