jquery.idcode.css,jquery选择器

目录

元素选择器

$("p"); //在页面中选取所有

元素

列：段落隐藏

$(function() {

$("button").click(function() {

$("p").hide();

});

});

这是一个标题

这是一个段落。

这是另一个段落。

点我

结果：

#id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素

$("#test")

列：

$(function(){

$("button").click(function(){

$("#test").hide();

});

});

这是一个标题

这是一个段落

这是另外一个段落

点我

.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

列：

$(function(){

$("button").click(function(){

$(".test").hide();

});

});

这是一个标题

这是一个段落。

这是另外一个段落。

点我

CSS选择器

$("p").css("background-color","red");

列：

$(function() {

$("button").click(function() {

$("p").css('background-color','red');

});

});

这是一个标题

这是一个段落。

这是另一个段落。

点我

结果：

*选取所有元素

选取body标签中的所有元素

$(function() {

$("button").click(function() {

$("*").hide();

});

});

这是一个标题

这是一个段落。

这是另一个段落。

点我

this选取当前html元素

$(document).ready(function(){

$("button").click(function(){

$(this).hide();

});

});

这是标题

这是一个段落。

这是另外一个段落。

点我

列：选择器练习

#box{

display: none;

width:200px;

height: 200px;

border:1px solid red;

background: green;

}

$(function(){

//id选择器

$(".box").css('background','red');

var allObject=$('*');

alert(allObject)

for(i=0;i

alert(allObject[i].tagName)//获取所有元素

}

//选择多个元素设置背景

$('.box,span').css('background','red');

//后代(包括子，孙...元素)

$('div span').css('background','red');//div中的所有span元素变红

//后代(子元素)

$('div>span').css('background','red');

//紧跟着后面

$('div+span').css('background','red');

//只要跟着div后面的所有的span元素

$('div~span').css('background','red');

//li中第一个元素

$('li:first').css('background','red');

//li中除了第一个元素

$('li:not(li:first)').css('background','red');

//li中的偶数元素

$('li:even').css('background','red');

//li中大于1的元素

$('li:gt(1)').css('background','red');

//获取根元素

$(":root").css("background-color","yellow");//整个html文件变黄色

//包含

$('span:contains("span")').css('background','red');//span中的所有span变红

//找li中内容为空的元素

$('li:empty').html('kkkk');//找li中内容为空的元素，给他设值为kkkk

$('li:first').html();取li中的值

//div中含有span的元素变红

$('div:has(span)').css('background','red');

//获取隐藏的元素(div)的值

alert($('div:hidden').html());

//获取隐藏域的值

alert($('input:hidden').val());

//

alert($(':input').length);

alert($(':text').length) //结果：2

//获取文本框的值

alert($('#username').val());

alert($('#age').val());

//获取复选框的值

alert($(':input[name="newsletter"]').attr('checked',true));

});

用户名:

年龄:

密码:

• aaaa
• bbbb
• cccc
• dddd
• eeee

mydiv

span1

span2

span3

span4

span5

divdiv

标签：jquery,function,li,css,background,选择器,red

来源： https://blog.csdn.net/Birdmotianlun/article/details/96478122