一、
1、在jQuery中，可以直接使用$符号，或者使用jQuery变量名，它俩完全一致
console.log(jQuery === $); // true
2、jQuery本身是函数，拥有自己的属性和方法
console.log($);//function ( selector, context ) {…
3、在ready方法中去执行正式的操作，等DOM加载完毕后去执行
$(document).ready(function () {
console.log('文档加载完毕');
});
简写为：
$(function () {
console.log('文档加载完毕');
}
3、将JQ对象与DOM对象转换
// 获取元素
var h2JQ = $('.title');
console.log(h2JQ);
// 将JQ对象转为DOM对象
var h2DOM = h2JQ.get(0);
// console.log(h2JQ[0]);
// 将DOM元素转为JQ元素
console.log($(h2DOM));
4、 使用$获取元素
// var h2 = $('h2');
// // 绑定事件
// h2.on('click', function () {
// // 修改内容
// h2.html('$');
// });
// $('h2').on('click', function () {
// $(this).html('$');
// });
二、选择器
// 通过id查找元素
// $('#div2').css('color', 'blue');
// 通过class
// $('.div1').css('color', 'red');
// 通过标签名
// $('span').css('color', 'yellow');
// 群组选择器
// $('span, p').css('background-color', 'pink');
// 后代选择器
// $('div span').css('font-size', '2em');
// 如果符合选择器的元素有多个，则可以全部选出，并且设置样式的时候，可以同时给数组内容所有元素添加
// $('div').css('border', '1px dashed blue');
// 直接子级选择器
// $('.container > span').css('border', '1px dashed red');
// first
//$('li:first').css('color', 'blue');
// last
// $('li:last').css('color', 'red');
// :first-child
// $('li:first-child').css('color', 'blue');
// :last-child
// $('li:last-child').css('color', 'red');
// 如果使用:fist或者:last，则没有父级标签
// 如果使用:first-child或者:last-child，则从子集的区域内查找
// eq()
// $('li:eq(7)').css('background-color', 'yellow');
// nth-child()
//$('li:nth-child(3)').css('background-color', 'yellow');
// :eq和:first类似，没有父级标签,不区分位置，并且下标从0开始
// :nth-child和:first-child类型，区分位置,从子集的区域内查找，下标从1开始
// :not()用于排除某些元素，如果是多个，直接在not()后面的小括号中使用群组选择器
// $('.wrapper > *:not(p, h3)').css('background-color', 'cyan');
// 代表奇数元素，根据下标，从0开始
// $('li:odd').css('background-color', 'blue');
// $('li:even').css('background-color', 'blue');
// 代表奇数元素，根据下标，从1开始
// $('li:nth-child(odd)').css('background-color', 'blue');
// $('li:nth-child(even)').css('background-color', 'blue');
// 通过属性选择器获取元素
// $('p[title]').html('我是通过属性选择器修改后的内容');
// 表单对于的选择器
// $(':input').css('background-color', 'blue');
// 可以直接编写input的type的值去选取元素
// $(':text').css('background-color', 'blue');
// $(':password').css('background-color', 'blue');
// $(':checkbox').css('background-color', 'blue');
// 选取默认选中的元素
// $(':checked').css('background-color', 'red');
// $('h2').css('color', 'blue').on('click', function () {
// alert('h2');
// $(this).slideUp(2000);
// }).css('background-color', 'yellow');
三、DOM操作
1、 append
appendTo
prepend
prependTo
after
insertAfter
before
insertBefore
remove
clone
empty
replaceWith
replaceAll
// 原生JS
// var header = document.createElement('div')
// header.className = 'header';
// document.querySelector('.container').appendChild(header);
$(function () {
// 创建标签
// var header = $('<div class="header"></div>');
// append() 拼接元素
// $('.container').append(header);
// appendTo()
// header.appendTo($('.container'));
// 可以直接把容器的选择器写成参数，而不添加$()
// header.appendTo('.container');
// $('<div class="header"></div>').appendTo('.container').append('<h1>标题</h1>');
// 使用jq创建结构的时候，可以同时创建多个标签
// $('<div class="header"><h1>我是标题</h1></div>').appendTo('.container');
// $('<div class="header">' +
// '<h1>我是标题</h1>' +
// '</div>').appendTo('.container');
// 如果创建的标签结构比较复杂，代码比较多。
// 还折成一行就会造成代码可读性降低
// 可以使用ES6的模板字符串解决这个问题
// 模板字符串使用 `` 代表结构，所有内部的内容，都是字符串的内容，可以换行写
// 模板字符串内部如果需要使用变量的话，直接使用${}，在内部编写就可以解析
// var str = '我是内容';
// $(`<div>
// <div>
// <div>${ str }</div>
// </div>
// </div>`).appendTo('body');
// $('<h1>h1</h1>').appendTo('.container');
// $('<h2>h2</h2>').appendTo('.container');
// 使用after()和before进行兄弟元素的拼接
// $('h2').before('<hr />');
// $('h1').after('<hr />')
// 和append 、 appendTo不同的在于叫 insertAfter / insertBefore，进行将前面的元素拼接到后面的元素上下
// $('<hr />').insertAfter('h1');
// $('<hr />').insertBefore('h2');
//与append相反，在元素里的最前面插入
// $('<hr />').prependTo('.container');
// $('.container').prepend('<hr />');
// append
// appendTo
// prepend
// prependTo
// after
// insertAfter
// before
// insertBefore
// 插入一个标签
// $('<h2>标题</h2>').appendTo('.container');
// $('<h2>标题</h2>').appendTo('.container');
// $('<h2>标题</h2>').appendTo('.container');
// $('<h2>标题</h2>').appendTo('.container');
// 使用h1标题替换掉h2标题
// $('h2:eq(1)').replaceWith('<h1>标题</h1>');
// $('<h1>标题</h1>').replaceAll('h2:eq(1)');
// 使用 replaceWith 或者 replaceAll 可以进行标签的替换
// 移除元素本身
$('<h1>我是被移除的元素</h1>').appendTo('.container').remove();
// 清空元素内容
$(`<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>`).appendTo('.container').empty();
// 如果使用jq同时创建了多层的标签结构，则返回值代表最外层
// 复制
$('.container').clone().appendTo('body');
});
2、
$(function () {
// 创建标签并拼接
var div = $(`<div>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
</div>`).appendTo('.container');
// 使用html()方法，获取全部内容
// console.log(div.html());
// 使用text()方法，获取文本内容
// console.log(div.text());
// 如果html()方法有参数，则修改内容
// div.html('<h1>我是h1</h1>');
// text()有参数的情况和html()类似
// div.text('我是修改后的文字');
// 注意: 在JQ中，不是所有地方都能使用链式语法。当某个方法具有自定特定的放回值的情况，则不能使用链式语法
// div.html().css('background-color', 'red');
// val()方法是为了给表单元素的value属性使用。有参则设置，无参则取值
// $(':input').val('1831468462');
// console.log($(':input').val());
// 添加class
// $('.container').addClass('c1 c2');
// 移除class
// $('.container').removeClass('c1');
// 切换class
// 如果当前存在，则移除，否则添加
// 更多的情况用在动画的切换
// $('.container').toggleClass('active');
// 添加a标签
// var a = $('<a></a>').appendTo('.container');
// 设置内容
// a.html('百度一下');
// 添加属性
// a.attr('href', 'http://www.baidu.com');
// 添加class
// a.addClass('link');
// $('<a></a>').appendTo('.container').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link');
$('<a></a>').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link').appendTo('.container');
// 如果attr方法，只有一个参数，为属性名，则获取对应的属性值
$('.link').attr('href');
// 如果attr方法，有两个参数，分别为名称值，为修改或添加属性值
$('.link').attr('href', 'http://blog.lidaze.com');
// 如果attr方法有一个参数，并且为对象，则可以同时添加或修改多个属性与其对应的值
$('.link').attr({
href: 'http://book.lidaze.com',
title: '我是a标签'
});
// 移除
$('.link').removeAttr('title');
// css()方法和attr()方法使用几乎一样
// css()赋值标签的样式
$('.link').css('color');
$('.link').css('color', 'yellow');
$('.link').css({
color: 'green',
'font-size': '30px'
});
});
网友评论