JQuery学习笔记（1）——选择器

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);

转载于:https://www.cnblogs.com/chaoyang123/p/11549756.html

相关资源：JAVA上百实例源码以及开源项目