JQ语法

各位朋友，很高心大家来到我的博客，今天我将带领大家学习和回顾一下JQ基本语法，让我们的编码变得简简单单，Let's go!!! jquery学习网站

jQuery 语法:

原理：jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

知道了上面的语法后，我们就可以可是编译的过程了，本次介绍为面向过程的方法

一、 文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

二、 jQuery 名称冲突

var Y=jQuery.noConflict()，帮助您使用自己的名称（比如 Y）来代替 $ 符号。

三、 jQuery 选择器

1. jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2. jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3. jQuery CSS 选择器

4. 更多的选择器

四、 jQuery 事件

事件绑定：.bind() .delegate() .off() .on() .one() .trigger() 等

鼠标事件：.click() .contextmenu() .dblclick() .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover()

//点击事件-简写
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});

//点击事件
$( "p" ).on( "click", function() {
console.log( "click" );
});

//绑定多个事件

2个事件执行一个函数
$( "input" ).on(
"click change", //
function() {
console.log( "An input was clicked or changed!" );
}
);

2个事件执行各自的函数（事件放在对象里）
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});

$( "p" ).off( "click" );   //关闭click事件

2个事件执行各自的函数（事件连接在一起）
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };

$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar );

// 只第一次点击有效
$( "p" ).one( "click", firstClick );

// 鼠标悬浮(移入和移出)
$( "p" ).hover(function() {
$( this ).toggleClass( "hover" );
});

事件对象 - Event : event.pageX event.pageY event.preventDefault() event.stopPropagation() event.type event.data event.result

// 阻止a标签的默认事件
// 点击a,打印出其内容  -codeone

$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

// 点击#list下面所有herf带有http的a标签，让其增加一个target的属性，值为_blank;    -codetwo

$( "#list" ).on( "click", "a[href^='http']", function( event ) {
event.preventDefault();
$( this ).attr( "target", "_blank" );
});

$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
var elem = $( this );
if ( elem.is( "[href^='http']" ) ) {
elem.attr( "target", "_blank" );
}
});

// 文档加载后，无需点击，a自动执行上述点击后的函数  -codethree
$( "a" ).trigger( "click" );

表单事件：.blur() .change() .focus() .select() .submit()

两种方式都可,event阻止submit默认事件

$( "#form" ).on( "submit", function( event ) {
// 取消默认事件
event.preventDefault();
// 取消冒泡
event.stopPropagation();
});

$( "#form" ).on( "submit", function( event ) {
// 取消默认事件和取消冒泡
return false;
});

一个元素的值改变的时候将触发change事件。此事件仅限用于<input>元素，<textarea>和<select>元素。
对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发，但对于其他类型的input元素，
该事件触发将推迟，直到元素失去焦点才会触点。

select多选框：
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>

js代码：
$('.target').change(function() {
alert("已触发change");
});

键盘事件：.keydown() .keypress() .keyup()

五、 jQuery 效果

隐藏、显示、切换，滑动，淡入淡出，以及动画，这些都是JQ自带的一些方法，哇哦，貌似很厉害！

下面二中写法都可以实现相同的效果！后者是前者的简写形式

$("#btn").on("click",function(){}) == $("#btn").click(function(){})

$("#btn").on("click",function(){
$("#box").show(1000); //点击时，id为box显示，动画时间1s
})

$("#btn").on("click",function(){
$("#box").hide(1000); //点击时隐藏
})

$("#btn").on("click",function(){
$("#box").toggle(1000); //点击隐藏or显示的切换
})

$("#btn").on("click",function(){ //淡入
$("#box").fadeIn(1000);
})

$("#btn").on("click",function(){ //淡出
$("#box").fadeOut(1000);
})

$("#btn").on("click",function(){ //淡入or淡出的切换
$("#box").fadeToggle(1000);
})

$("#btn").on("click",function(){
$("#box").slideDown("fast"); //下滑   参数：slow/fast/毫秒
})

$("#btn").on("click",function(){ //上滑
$("#box").slideUp("slow");
})

$("#btn").on("click",function(){ //下滑or上滑的切换
$("#box").slideToggle(4000);
})

$("#btn").on("click",function(){ //css与animate不同在于过渡效果
//$("#box").css({
//  width:"800px",
//  left:"100px",
//})
$("#box").animate({ //宽度和左偏移量为同步进行
width:"800px",
left:"100px",
},1000)
})
JQ中调用多个动画， 提供针对动画的队列功能。

$("#btn").on("click",function(){
$("#box").stop(true,false); //前个false停止当前动画，执行后面排队动画（true为不执行后面动画），后个false默认停止当前动画(true为直接跳转此动画结束)
})

设置时间的方法：

// 动画默认时间

{
slow: 600,
fast: 200,
_default: 400 // Default speed, used for "normal"
}

// 修改和自定义动画时间

jQuery.fx.speeds.fast = 300;  // fast由默认200变成300
jQuery.fx.speeds.blazing = 100; //  自定义的动画时间参数
jQuery.fx.speeds.excruciating = 60000; // 自定义的动画时间参数

执行队列动画的方法：

执行队列动画的几种方法的

// next()开启下一个动画，

$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(next){
console.log("事件1");
next();
})
.queue(function(next){
console.log("事件2");
next();
})
.queue(function(next){
console.log("事件3");
next();
})
.queue(function(next){
console.log("事件4");
next();
})
.queue(function(next){
console.log("事件5");
next();
})
});

// dequeue()开启下一个

$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(){
console.log("事件1");
$(this).dequeue();
})
.queue(function(){
console.log("事件2");
$(this).dequeue();
})
.queue(function(){
console.log("事件3");
$(this).dequeue();
})
.queue(function(){
console.log("事件4");
$(this).dequeue();
})
.queue(function(){
console.log("事件5");
$(this).dequeue();
})
});

//自带的先执行即4先执行  4->1->2->3
//自定义的bi最后需要.dequeue("bi")调用

$("div").on("click",function(){
$(this)
.queue("bi",function(){
console.log("事件1");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件2");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件3");
$(this).dequeue("bi");
})
.queue(function(){
console.log("事件4");
})
.dequeue("bi")
});

六、 jQuery 文档操作方法

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

//1. 读取元素内容
console.log($("#p0").text());  //不带html的标记，p0内容带的标签会被解析
console.log($("#p0").html());  //带html,p0内容带的标签不会解析
$("#a").on("click",function(){
alert($("input").val());
});

//2. 修改内容
$("#aa").on("click",function(){
$("p").text("二师兄不信");
})

//3. 查看属性
console.log($("#p1").attr("cc"));

//4. 修改属性
$("#p1").attr({"cc":500,"bb":"world","dd":"zsf"});
$("#p1").removeAttr("cc");

//5. 添加元素
$("#p2").append("<strong>哈哈</strong>"); //后面加
$("#p2").prepend("<strong>嘿嘿</strong>");  //前面加
$("#p2").before("<strong>哈哈</strong>"); //p之前
$("#p2").after("<strong>嘿嘿</strong>"); //p之后

//6. 删除元素
$("#div0").remove(); //删除本身及其子集，无法取回
$("#div0").empty(); //不删除本身

七： jQuery CSS 操作函数

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

// css操作

//1. 增加css样式
$("#div1").addClass("aa bb");  //同时增加类名为aa和bb的样式，注意空格隔开
$("#toggle").on("click",function(){
$("#p1").toggleClass("aa bb"); // toggleClass是增加和删除的切换
});

//2. 删除css样式
$("#div1").removeClass("bb");

//3. 修改css样式
$("#div2").css("background","red");

//4. 查看css样式
console.log($("#div2").css("backgroundColor"));
console.log($("#div2").css("background-color"));

八：jQuery 遍历

body代码

<div id="box">
<ul id="ul">
<li class="li1">
<span></span>
</li>
<li class="li2">
<p></p>
</li>
<li class="li3">
<img src="#">
</li>
<li class="li4">
<div class="box1"></div>
</li>
</ul>
</div>

js代码

$(document).ready(function(){
$("span").parent(); //li1  父级

$("p").parents(); //li2,ul,box,body 所有祖先

$("#box1").parents("ul"); // ul  过滤祖先仅要ul

$("img").parentsUntil("#box"); // li3,ul   img和#box之间的祖先

$("img").parentsUntil("#box","ul"); // ul   img和#box之间为ul的祖先

$("img").closest("li")  //li3   最近的父级li

$("#ul").children();  //  li1,li2,li3,li4   #ul直接子元素

$("#ul").children("li.li3"); // li3   #ul子元素里类名为li3的元素

$("#box").find("*");  //ul,li1~li4,span,p,img,#box1   所有后代

$("#box").find("span"); //span   所有后代span

$(".li1").siblings(); // li2,li3,li4  所有同胞

$(".li1").siblings(".li3"); // li3  所有同胞为.li3的元素

$(".li1").next();  //li2   下一个同胞

$(".li2").nextAll(); //li3 ,li4  随后所有的同胞

$(".li2").nextAll(".li3"); //li3   随后所有的.li3同胞

$(".li1").nextUntil(".li4"); // li2,li3  之间的同胞

//  prev(), prevAll() & prevUntil() 与next方法相同，不过方向相反

$("div p").first();  // 首个div元素内部的首个P元素

$("div p").last();   //最后一个div元素内部的最后一个P

$("li").eq(1);   //li2  索引值为1，从0计数，故为li2

$("li").filter(".li4"); // li4     不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$("li").not(".li4");// li1,li2,li3

});

九：jQuery Ajax 操作函数

优点：其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

选项卡功能：

$("ul li").on("click",function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
console.log($(this).index());
$("div").eq(index).css({display:"block"});
});