Home > Web Front-end > JS Tutorial > Summary of commonly used JQuery functions and functions_jquery

Summary of commonly used JQuery functions and functions_jquery

WBOY
Release: 2016-05-16 15:08:10
Original
1399 people have browsed it

1. Document loading completion execution function

$(document).ready(function(){
alert("开始了");
});
Copy after login

2. Add/Remove CSS classes

$("#some-id").addClass("NewClassName");
$("#some-id").removeClass("ClassNameToBeRemoved");
Copy after login

3. Selectors take advantage of the capabilities of CSS and Xpath (XML Path Language) selectors, as well as jQuery’s unique selectors

3.1 Commonly used:

1. Select all paragraphs in the document according to the tag name: $('p')

2. According to ID: $("#some-id")

3. Class: $('.some-class')

3.2 Using CSS selectors:

$("#some-id > li") 选择特定id下的所有子li元素
$("#some-id li:not(.horizontal)") 伪类选择,特定id下所有没有.horizontal 类的li元素
Copy after login

3.3 Use XPath selector:

Attribute selection: $("a[@title]") selects all links with title attribute

$("div[ol]") selects all div elements that contain an ol element

$('a[@href^="mailto:%22]') selects all href attributes [@href] and the attribute value starts with mailto^="mailto" (^ identifies the string starting with $ String knot

tail, * represents any position in the string)

$('a[@href$=".pdf"]') selects all links with href attribute and the attribute value ends with .pdf

$('a[@href*="mysite.com"]') selects all links where mysite.com appears anywhere in href (including mysite.com)

3.4JQuery custom selector (filter, filter out all elements that meet a certain condition from the selected result set), similar to CSS pseudo-class selector, starting with ":"

1.$('div.horizontal:eq(1)') selects the 2nd item in the div collection with class horizontal

$('div:nth-child(1)') selects all divs that are the 1st child element of its parent element

2. Custom selectors: odd and :even to select odd and even rows

$('tr:odd').addClass('odd'); //Filter and select odd elements in the result set

$('tr:even').addClass('even'); //Filter and select even elements in the result set

3. Custom selector: contains()

$('td:contains("Henry")') selects all tables containing the Henry string

3.5JQuery selection function

1.$('#some-id').parent() selects the parent element of a specific element

2.$('#some-id').next() selects the next nearest sibling element of a specific element

3.$('#some-id').siblings() selects all sibling elements of a specific element

4.$('#some-id').find('.some-class') selects all elements containing a specific class under a specific element

5.$('#some-id').find('td').not(':contains("Henry")') Select all elements whose table content under a specific element does not contain Henry

5.$('#some-id').find('td').not(':contains("Henry")').end() .end() means going back to the last .find( ) element at

3.6 Access DOM elements, use the get() method to obtain from the selected JQuery object, and remove the JQuery packaging

var myTag = $('#some-id').get(0).tagName;
var myTag = $('#some-id')[0].tagName; //与上面的等效
Copy after login

4. Events (all events are bound to a certain element)

4.1 Binding events

$("#some-id").bind("click", function(){ })
$("#some-id").unbind("click", bindedFunctionName); //移除已绑定的事件,前提是绑定的函数有名称(不是匿名函数)
$("#some-id").click(function(){ })
Copy after login

4.2 Composite function binding event

$("#some-id").toggle(function(){ } ,function(){ }); //交替执行
$(“#some-id”).toggleClass("hidden"); // 添加/删除类交替进行
$("#some-id").hover(function(){ }, function(){ }); //鼠标进入元素时执行第一个函数,离开元素时执行第二个函数
$("#some-id").one("click", functionName); //只需触发一次,随后便立即解除绑定

Copy after login

4.3 Imitate users to trigger an event

$("#some-id").trigger("click"); //Trigger the click event of a specific element

5. Add effects to elements

5.1 Read or set CSS style attributes

$("#some-id").css("property") //Read style value
$('#some-id').css('property', 'value') //Set a style value
$('#some-id').css({property1: 'value1', property2: 'value2'}) //Set multiple style attributes

5.2 Change font size

$(document).ready({
$('#button-id').click(function(){
var currentSize = $('#text-id').css('fontSize'); //获取字体大小,如30px
var num = parseFloat(currentSize, 10); //将值转为浮点数,.parseFloat( , )为javascript内置函数,这里是转为10进制的浮点数
var unit = currentSize.slice(-2); //获取单位名称,如px,.slice()是javascript内置函数,获取字符串指从定位置开始的子字符串,-2表示倒数两个字符
num *= 1.5;
$('text-id').css('fontSize', num + unit); //设置字体大小样式
});
});
Copy after login

5.3隐藏和显示

$('#some-id').show(); //无效果,会自动记录原来的display属性值(如:block, inline),再回复display值
$('#some-id').hide(); //无效果,等效于:$('#some-id').css('display', 'none'); 隐藏元素,不保留物理位置
大小、透明度逐渐变化的显示或隐藏

$('#some-id').show('slow'); //指定显示速度,在指定时间内元素的高、宽、不透明度逐渐增加到属性值,有:slow是0.6秒,normal是0.4秒,fast是0.2秒,或者直接填入毫秒数
$('#some-id').hide(800); //与.show()指定速度显示一样,指定时间内高、宽、不透明度逐渐减小到0

淡入淡出

$('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0

5.4构建具有动画效果的show

主要调用.animate()方法,其有4个参数:包含样式属性及值的映射;可选的速度参数;可选的缓动类型;可选的回调函数;

1.并发显示多个效果

$('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
$('div .button').animate({left:600, height:44}, 'slow'); //水平位置从0移动到600,高度由0增加到44

2.排队显示多个效果,级联多个.animate(),一个效果显示完了再显示下一个效果

$('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');
6DOM操作

6.1属性操作

$('#some-id').attr('property'); //获取属性
$('#some-id').attr('property','value'); //设置属性
$('#some-id').attr({'property1': 'value1', 'property2': 'value2'}); //设置多个属性
修改一个段落中所有链接,并给每个链接附上新的id号
$('div p .content a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'link_' + index
});
});
// ********* JQuery的.each()类似一个迭代器,给其传递的参数index类似一个计数器 *********
Copy after login

6.2插入新元素

1.将元素插入到其他元素前面:.insertBefore()和.before()

2.将元素插入到其他元素后面:.insertAfter()和after()

3.将元素插入到其他元素内部或后面(相当于追加一个元素):appendTo()和append()

4.将元素插入到其他元素内部或前面(相当于追加一个元素):prependTo()和prepend()

6.3包装元素,将元素包装到其他元素中 .wrap();

$('#some-id').wrap('

  • '); // 将某一特定元素包装到li中,即在特定元素外围添加一个包围元素

    6.4复制元素 .clone()

    1.$('#some-id').clone().appendTo($('body'));

    2.复制深度,当传入false参数时,只复制匹配上的元素,其内部的其他元素不复制

    $('#some-id').clone(false)

    注意:.clone()方法不会复制元素中的事件

    6.5移除匹配元素中的元素,类似清空元素

    $('#some-id').empty();

    6.6从DOM中移除匹配的元素及其后代元素

    $('#some-id').remove();

    有关常用的JQuery函数及功能小结 小编就给大家介绍到这里,希望对大家有所帮助!

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template