jquery入门

JQuery

JQuery对象

Jquery包装集对象

var divJquery = $("#mydiv");

Dom对象与Jquery对象的互相转换

var domToJquery = $(divDom);
console.log(domToJquery);
var jqueryToDom = divJquery[0];
console.log(jqueryToDom);

each() Jquery方法，遍历方法

divJquery.each(function(index,element){
   console.log(index);
   console.log("--------");
   console.log(element);// dom对象
   console.log(this); // dom对象
});

基础选择器

id选择器

var div1 = $("#div1");

类选择器

var cls = $(".test");

元素选择器

var divs = $("div");

通用选择器

var all = $("*");

组合选择器

var group = $("#div1,span,.test");

层次选择器

后代选择器 ancestor descendant $("#parent div")

var houdai = $("#parent div");

子代选择器 parent > child $("#parent>div")

var zidai = $("#parent > div");

相邻选择器 prev + next $(".blue + img") 只会查询指定元素的下一个指定元素（只往下找一次元素）

var xl = $("#child + p");

同辈选择器 prev ~ sibling $(".blue ~ img")

var tb = $(".gray ~ img");

表单选择器

表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
非表单元素：div、span、p、h1~h6、img、a、table

表单选择器，所有表单元素

var inputs = $(":input"); 

元素选择器

var inputs2 = $("input"); 

过滤选择器

:checked 选择所有被选中的元素

var checkboxs = $(":checkbox");
var ckeckeds = $(":checkbox:checked");

:eq(index) 匹配指定下标的元素

var second = $(":checkbox:eq(1)")

:gt(index) 匹配下标大于指定值的所有元素

var gtfirst = $(":checkbox:gt(0)")

:odd 选择每个相隔的（奇数） 元素

var odds= $(":checkbox:odd")

:even 选择每个相隔的（偶数） 元素

操作元素的属性

获取属性的值

1. 获取属性的值 attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回
   undefined。 prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)
2. 设置属性的值 attr(属性名称,属性值); prop(属性名称,属性值); 移除属性 removeAttr(属性名)
3. 移除指定的属性 removeAttr(‘checked’)
4. 如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();

获取元素的属性

var hef = $("a").attr("href");
var hef2 = $("a").prop("href");
var aa1 = $("a").attr("aa");
var aa2 = $("a").prop("aa");

获取复选框的选中状态

var ck1 = $("#ck1").attr("checked");
var ck2 = $("#ck1").prop("checked");

设置属性的值

$("a").attr("href","http://www.shsxt.com");
$("#ck1").prop("checked",false);
//$("#ck2").prop("checked",true);
$("#ck2").attr("checked","checked");
$("a").attr("aa","aabbcc");

移除属性

$("a").removeAttr("href");

attr // 设置元素的class属性（如果属性不存在，则添加属性）

$("#conRed").attr("class","red");
// 如果属性存在，则修改属性值
$("#conBlue").attr("class","green");

addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准

$("#conRed").addClass("larger");

css()// 添加一个具体样式 css(“样式名”,“样式值”)

$("#remove").css("color","red");

同时添加多个具体的样式名 css({“样式名”:“样式值”,“样式名”:“样式值”})

$("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})

操作元素的内容

// 设置（非表单）元素的内容// 包含的html标签

$("#html").html("<h3>上海</h3>"); 
// $("#html").html("上海");

// 不包含html标签,只能设置纯文本

$("#text").text("<h3>上海</h3>"); 
$("#text").text("上海");

// 设置表单元素的值

$("input").val("Hello");

// 获取元素的值

console.log($("#getHtml").html());
console.log($("#getHtml").text());
console.log($("input").val());

添加元素

// 父元素

var parent = $("#parent");

// 要追加的内容

var span = $('<span class="pink">女神</span>');

前追加 （追加的都是子元素）// prepend(content)

 parent.prepend(span);
// $(content).prependTo(selector)
$(".blue").prependTo(parent);

后追加（追加的都是子元素）

var singer = '<span class="green">歌手</span>';
(singer).appendTo(parent);

插入同级元素

// $(selector).before(content)
$("#xxr").before("<div class='blue'><span>小奶狗</span></div>");
// $(selector).after(content)
$("#xxr").after("<div class='red'><span>老腊肉</span></div>");

删除元素

remove()

$(".green").remove();

empty()

$(".blue").empty();

ready()加载事件

1. ready()加载事件 ready()类似于 onLoad()事件 ready()可以写多个，按顺序执行
   $(document).ready(function(){})等价于$(document).ready(function())等价于(function(){})

2. onload与ready()的区别：
   1、ready()在DOM结构解析完毕后即执行
   2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

jquery的ready事件

$(document).ready(function(){
   var mydiv = $("#mydiv");
   console.log(mydiv);
});
$(function(){
   var mydiv = $("#mydiv");
   console.log(mydiv);
});

事件

// bind()绑定事件
$("#btn").bind("click",function(){
   alert('这是个按钮。。。');
});
// 直接绑定事件
$("#btn").click(function(){
   alert('这是个按钮。。。');
});
/*绑定多个事件*/
// 聚焦失焦事件
// 方式一：
$("#txt").focus(function(){
   // 聚焦时清空文本框
   $("#txt").val("");
}).blur(function(){
   $("#txt").val("你好");
});
// 多个事件绑定一种行为
$("#txt").bind("focus blur",function(){
   console.log("。。。");
});
$("#txt").bind("focus",function(){
   console.log("aaa");
}).bind("blur",function(){
   console.log("bbb");
});
$("#txt").bind({
   focus:function(){
      console.log("链式编程1");
   },
   blur:function(){
      console.log("链式编程2");
   }
});