jQuery
jQuery secondary packaging for the kit js
jQuery and JavaScript are top of Windows, namely window. * / window.document. *, and Windows can be omitted
jQuery selector
$ ( 'Css3 selector syntax') is jq selector, obtained jq is the object, the object can call all the functions jq jq library
jq objects can be understood as a storage array js objects (object does not need to store several js care)
js jq object into an object:
jq objects [js where the index object]
benefit:
You can use the syntax js
js jq object into a subject:
$ (Js objects)
benefit:
You can use the syntax jq
Step three operating page jQuery
Gets the label, binding events, handling label
1. $('h1').click(function (ev) {
console.log(ev);
console.log(ev.clientX);
console.log(ev.clientY);
})
ev here it is jq event object, but the event did js fully compatible, which is included js event
2.$('h1').on('click', function (ev) {
console.log(ev);
})
Compatibility More
3.$('p').click(function () {
console.log (this); / this is obtained where js object itself
console.log ($ (this) .text ( ));
});
Label to multiple bindings for the same event, but the object in this event jq obtained or js objects,
If you want to use jq function, you need to convert this into jq target $ (this), that is to say above object conversion
Operation text (get the text)
$ div.text () text
$ div.html () tag content
$ inp.val () form content
Style operation
Gets the style
1. $ div.css ( 'css in the style attribute name');
2.$('h1').click(function () {
let $this = $(this);
let color = $this .css('color');
let fs = $this.css('font-size');
let ta = $this.css('text-align');
console.log(color, parseInt(fs), ta);
});
Setting styles
$('h1').click(function () {
let $this = $(this);
let color = $this .css('color');
let fs = $this.css('font-size');
let ta = $this.css('text-align');
console.log(color, parseInt(fs), ta);
1. $this.css('background-color', 'orange');
2.$this.css({
'background-color': 'pink',
'border-radius': '10px',
'width': '200px',
});
3.$this.css('height', function (index, oldValue) { //function函数就是‘height’要设置的参数
console.log(oldValue);
let w = $(this).width(); // $(this) 可以拿到调用者对象
return w / 2; //返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})
});
类名的操作
优点：
可以一次性获取提前设置好的一套样式
增加类名： $div.addClass('类名')
删除类名： $div.removeClass('类名')
切换类名（ 无类名添加，反之去除）：$div.toggleClass('类名')
属性的操作
获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数') //像这种('属性名', '属性值')，后面的属性值都可以写成function函数
删除属性值：$div.attr('属性名', '')